В мире веб-разработки масштабируемая векторная графика (SVG) — это мощный инструмент для создания графики и управления ею. Одной из менее известных особенностей SVG являются маркеры. Маркеры SVG используются для добавления декоративных или функциональных элементов к концам, началу или середине путей или линий SVG. В этой статье мы рассмотрим различные методы использования SVG-маркеров, а также примеры кода для улучшения вашей веб-графики.

Метод 1: определение базового маркера
Давайте начнем с простого примера создания маркера с использованием элемента :

<svg>
  <defs>
    <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
      <path d="M0,0 L10,5 L0,10" />
    </marker>
  </defs>
  <line x1="10" y1="10" x2="100" y2="100" marker-end="url(#arrow)" />
</svg>

В этом примере мы определяем маркер с идентификатором «стрелка» и используем его как свойство marker-endдля линейного элемента. Маркер рисуется с помощью элемента .

Метод 2: настройка внешнего вида маркера
Маркерам SVG можно придать стиль с помощью свойств CSS. Вот пример настройки цвета и размера маркера:

<style>
  svg {
    width: 400px;
    height: 200px;
  }
  #arrow {
    fill: blue;
    stroke: red;
    stroke-width: 2;
    markerWidth: 10;
    markerHeight: 10;
  }
</style>
<svg>
  <defs>
    <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" orient="auto-start-reverse">
      <path d="M0,0 L10,5 L0,10" />
    </marker>
  </defs>
  <line x1="10" y1="10" x2="100" y2="100" marker-end="url(#arrow)" />
</svg>

В этом примере мы добавили собственные стили CSS к SVG и маркеру. Вы можете изменить fill, stroke, stroke-width, markerWidthи markerHeightсвойства для достижения желаемого внешнего вида.

<svg>
  <defs>
    <marker id="start" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6">
      <circle cx="5" cy="5" r="5" fill="green" />
    </marker>

    <marker id="mid" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6">
      <rect x="0" y="0" width="10" height="10" fill="blue" />
    </marker>

    <marker id="end" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6">
      <ellipse cx="5" cy="5" rx="5" ry="3" fill="orange" />
    </marker>
  </defs>

  <path d="M10,10 L100,100 L200,50" stroke="black" stroke-width="2"
        marker-start="url(#start)" marker-mid="url(#mid)" marker-end="url(#end)" />
</svg>