Nano Hash - криптовалюты, майнинг, программирование

Маркер SVG масштабирует только одно измерение с шириной штриха

У меня есть линии SVG переменной толщины, и все они имеют маркер в виде стрелки в конце, как в этом скрипка. По умолчанию для markerUnits установлено значение strokeWidth, что масштабирует оба (!) Размера стрелки в соответствии с шириной штриха линии.

Я, с другой стороны, хотел бы масштабировать только размер y, как показано на очень красивом рисунке ниже (должен вести себя как оранжевые стрелки, красный - не то, что я хочу).

введите описание изображения здесь

Причина этого в том, что я хочу смоделировать количество людей, перемещающихся из одного места в другое, но все стрелки должны иметь строго одинаковую длину (т.е.длина линии не является визуальным признаком, только ширина штриха).

Есть ли способ сделать это «динамически»; т.е. без постоянного пересчета пути маркера? Есть ли библиотека, которая может это сделать, например D3?

svg
02.12.2014

Ответы:


1

Не меняйте ширину обводки, вместо этого масштабируйте линию по оси y, например.

<svg width="90%" height="90%">
    <defs>
        <marker orient="auto" viewBox="-.1 -5 10 10" id="g-arrowhead-rep">
            <path fill="#808600" class="g-marker g-rep" d="M-.1,-5L4,0L-.1,5"></path>
        </marker>
    </defs>
    <g>
        <path id="k9ffd8001" d="M10,20,200,20" stroke="#808600" stroke-width="10" transform="rotate(0 0 0)" stroke-linecap="butt" stroke-linejoin="round" fill="none" marker-end="url(#g-arrowhead-rep)"></path>
        <path id="k9ffd8001" d="M10 80 200 80" stroke="#808600" stroke-width="10" transform="translate(0, -80) scale(1,2) " stroke-linecap="butt"
        stroke-linejoin="round" fill="none" marker-end="url(#g-arrowhead-rep)"></path>
        
    </g>
</svg>

02.12.2014
  • Это работает, по крайней мере, в Firefox. В Chrome линии / стрелки вообще не отображаются, а в IE (даже IE11) стрелки закруглены и слишком велики. Вы знаете решение этой проблемы? jsfiddle.net/8uxqK/307 03.12.2014
  • Хорошо, причиной, по которой он не отображался в Chrome, был пустой атрибут viewbox для тега svg. jsfiddle.net/8uxqK/309 Итак, единственная остающаяся проблема - это IE. 9-11. : - / 03.12.2014
  • Похоже на ошибку IE. Думаю, вы можете сообщить об этом в Microsoft. 03.12.2014
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..