orient

Атрибут orient указывает, как поворачивается маркер при размещении в соответствующей позиции на фигуре.

Этот атрибут можно использовать со следующими SVG-элементами:

• <marker>

Пример

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker
      id="arrow"
      viewBox="0 0 10 10"
      refX="5"
      refY="5"
      markerWidth="6"
      markerHeight="6"
      orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>

    <marker
      id="dataArrow"
      viewBox="0 0 10 10"
      refX="5"
      refY="5"
      markerWidth="6"
      markerHeight="6"
      orient="-65deg">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="red" />
    </marker>
  </defs>

  <polyline
    points="10,10 10,90 90,90"
    fill="none"
    stroke="black"
    marker-start="url(#arrow)"
    marker-end="url(#arrow)" />

  <polyline
    points="15,80 29,50 43,60 57,30 71,40 85,15"
    fill="none"
    stroke="grey"
    marker-start="url(#dataArrow)"
    marker-mid="url(#dataArrow)"
    marker-end="url(#dataArrow)" />
</svg>

Примечания по использованию

auto

Это значение указывает, что маркер ориентирован таким образом, что его положительная ось x направлена относительно контура в точке размещения маркера.

auto-start-reverse

Если маркер размещён с помощью marker-start, он ориентирован на 180° иначе, чем при указании auto. Для всех остальных маркеров auto-start-reverse означает то же, что и auto.

Примечание: Это позволяет определить один маркер наконечника стрелки, который можно использовать как в начале, так и в конце контура, то есть он будет указывать наружу с обоих концов.

<angle>

Это значение указывает, что маркер ориентирован под заданным углом, измеряемым между положительной осью x фигуры и положительной осью x маркера.

Примечание: Например, если указано значение 45, положительная ось x маркера будет направлена вниз и вправо в системе координат фигуры.

<number>

Это значение задаёт угол в градусах. Маркер ориентирован под заданным углом, измеряемым между положительной осью x фигуры и положительной осью x маркера.

Спецификации

Совместимость с браузерами