Маркеры SVG: создайте правильно выровненные стрелки

Чтобы прикрепить пользовательский наконечник стрелки к контуру SVG, определите его графику внутри <marker> и сошлитесь на ID через marker-end. Задайте refX и refY как точку графики, которая должна совпасть с концом контура. Затем выберите, должен ли маркер поворачиваться вместе с контуром и расти с шириной обводки.

Эти решения исправляют разные проблемы. Стрелка может смотреть правильно, но не совпадать с концом. Она также может правильно размещаться на тонкой линии и стать слишком большой при утолщении. Это руководство разделяет размещение, направление и размер на одной оригинальной форме указателя.

Начните с небольшого полного SVG

Сохраните код как markers.svg и откройте в браузере. Указатель — написанный вручную пример с кончиком в (11, 6) внутри пространства координат 12 × 12. Это не результат конвертации PerfectVector.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 180">
  <defs>
    <marker id="pv-pointer" viewBox="0 0 12 12"
      refX="11" refY="6" markerWidth="6" markerHeight="6"
      markerUnits="strokeWidth" orient="auto-start-reverse">
      <path d="M1 1 L11 6 L1 11 L4 6 Z" fill="#087f82"/>
    </marker>
  </defs>
  <g fill="none" stroke="#20364d" stroke-width="4"
    marker-start="url(#pv-pointer)" marker-end="url(#pv-pointer)">
    <path d="M50 45 H350"/>
    <path d="M50 135 C130 75,260 195,350 135"/>
  </g>
</svg>

Первый контур прямой, второй — кривая. Оба ссылаются на один маркер с двух концов. Блок <defs> хранит определение, а ссылки контуров делают его видимым. Справочник marker MDN описывает свойства прикрепления к началу, середине и концу.

Используйте ID, уникальный в содержащем документе. При объединении нескольких встроенных SVG добавьте префиксы к ID маркеров и обновите все соответствующие ссылки url(#...). Руководство по спрайтам symbol SVG объясняет ту же проблему управления ссылками у повторно используемых иконок.

Поместите нужную точку на конец контура

refX="11" refY="6" определяет точку графики маркера, которая должна совпасть с концом контура. Сам контур это не перемещает. В примере эта точка — острый кончик.

Сравните с refX="0" refY="0". Браузер помещает начало координат маркера на конец, оставляя кончик дальше вправо и вниз на горизонтальной линии. Увеличение маркера делает ошибку заметнее, но не исправляет опорную точку.

MDN описывает refX и refY как координаты опорной точки маркера. Читайте их относительно собственных координат графики, включая viewBox, а не угадывайте по отображаемой ширине.

Мы отдельно открыли полный SVG и отрендерили сравнение в браузере. Изменение опорной точки привело кончик к оранжевому кресту. Изменение ориентации развернуло начальную стрелку. Изменение режима единиц определило, растет ли указатель вместе с линией. Эти наблюдения относятся к данному примеру; проверьте реальный экспортированный файл в приложении получателя.

Кончик, закрепленный точно в конце, также оставляет обводку доходящей до этой точки. На толстой линии часть обводки может оставаться видимой рядом с узким кончиком, как показывает сравнение. Если этот стык важен, согласованно измените мотив, опорную точку или конец контура и проверьте соединение. Размещение маркера не укорачивает исходную обводку.

Пусть кривая управляет направлением

Для наконечника в конце контура orient="auto" следует направлению контура в этой точке. Конечное направление кривой задается локальной касательной, поэтому стрелка не обязана смотреть вдоль прямой между двумя концами контура.

Для стрелок на обоих концах используйте orient="auto-start-reverse". В конце он ведет себя как auto, но поворачивает начальный маркер дополнительно на 180 градусов. Документация orient MDN описывает это как способ повторно использовать один наконечник, направленный наружу с обоих концов.

Сравнение справа сверху показывает различие: с auto начальный указатель смотрит вдоль кривой. С auto-start-reverse — от начала наружу. Вторая вручную развернутая копия фигуры не нужна.

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

Решите, должна ли толщина линии менять размер маркера

markerUnits задает систему координат размеров и содержимого маркера. По умолчанию это strokeWidth; альтернатива — userSpaceOnUse. Различие описывает справочник markerUnits MDN.

Указатель занимает 10 из 12 горизонтальных единиц viewBox. С markerWidth="6" и markerUnits="strokeWidth" ширина без поворота равна 10 / 12 × 6 × stroke-width: 20 пользовательских единиц на обводке 4 и 40 на обводке 8. Сравнение снизу слева использует эти настройки.

Чтобы сохранить ширину указателя 20 единиц при обеих толщинах, измените определение на:

markerUnits="userSpaceOnUse" markerWidth="24" markerHeight="24"

Сравнение снизу справа использует эти значения. Если оставить markerWidth="6" и изменить только режим единиц, указатель будет гораздо меньше: шесть единиц больше не умножаются на ширину обводки.

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

Подготовьте свой мотив перед превращением в маркер

Треугольник или простой указатель нарисуйте напрямую. Для существующей векторной графики сохраните исходные контуры и определите координату прикрепления к линии. Сохраняйте намеренные отверстия, упрощайте детали, исчезающие в предполагаемом размере, и оставляйте достаточно места в области просмотра маркера.

Если собственный наконечник или декоративный мотив сохранился только в PNG или JPG, процесс преобразования изображения в вектор PerfectVector может помочь восстановить вариант SVG перед упаковкой. Сравните силуэт и маленькие отверстия с исходником, удалите ненужную фигуру фона, затем выберите границы и опорную точку утвержденной графики. Конвертация не создает определения маркеров, не задает направление контуров и не добавляет поведение соединителей диаграмм.

При проверке задавайте цвета явно. Здесь бирюзовый маркер и темно-синяя линия сохраняют видимой границу. Если ваша стрелка должна иметь один цвет, осознанно задайте оба оформления и проверьте итоговый результат. Руководство по изменению цвета SVG описывает фиксированные заливки и стили, мешающие перекрашиванию.

Проверьте файл в месте использования

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

• Подтвердите, что каждый url(#...) ссылается на нужный ID маркера после упаковки или оптимизации.
• Проверьте прямые и изогнутые контуры, включая начальный маркер, если он используется.
• Сравните самую тонкую и толстую линии дизайна.
• Проверьте кончик, стык и обрезанную графику в конечном размере.
• Независимо откройте передаваемый SVG и сравните с исходным предпросмотром.

Маркеры — видимые украшения, прикрепленные к положениям контура. Они не создают смысловых связей между объектами диаграммы. Для собственных точек подключения и поведения шаблонов редактора диаграмм используйте нативную систему фигур; руководство по пользовательским фигурам draw.io описывает эту отдельную задачу.

Маркер также не становится автоматически физически объединенным контуром резки. Если нужны замкнутые контуры реза, подготовьте и проверьте отдельную копию из контуров в векторном редакторе. Перекрытие линии и наконечника на экране не доказывает единого контура. Дополнительные руководства по подготовке SVG описывают очистку графики и последующие проверки.

Частые вопросы

Почему наконечник SVG смещен относительно линии? Проверьте refX и refY относительно координат графики маркера. Они задают точку, помещенную на конец контура. В примере кончик находится в 11,6; значение 0,0 помещает туда начало координат.

Как использовать один наконечник на обоих концах? Сошлитесь на один маркер через marker-start и marker-end и используйте orient="auto-start-reverse". Начальный экземпляр разворачивается, а конечный следует направлению контура.

Почему наконечник растет при утолщении линии? Значение markerUnits по умолчанию — strokeWidth. Используйте userSpaceOnUse, если маркер должен сохранять размер в пользовательских координатах элемента, затем подберите markerWidth и markerHeight под эту систему единиц.

Превращает ли маркер стрелку в один замкнутый контур? Нет. Определение маркера остается отдельным от ссылающегося контура. Подготовьте и проверьте настоящую объединенную геометрию, если дальнейшая резка или редактирование требуют этого.

Источники

1. MDN — marker — Определения маркеров, поддерживаемые фигуры и свойства прикрепления.
2. MDN — refX — Горизонтальное размещение опорной точки в системе координат маркера.
3. MDN — refY — Вертикальное размещение опорной точки в системе координат маркера.
4. MDN — orient — Автоматический поворот и разворот начального экземпляра.
5. MDN — markerUnits — Размеры относительно обводки и в пользовательских координатах.

Начните с одного мотива и проверьте опорную точку, направление и размер на линии и кривой. Если мотив существует только в растре, подготовьте вариант SVG, проверьте силуэт и отверстия, затем упакуйте принятые контуры как маркер.