orient

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

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

<marker>

Пример

html

<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` \| `auto-start-reverse` \| `<angle>` \| `<number>`
Значение по умолчанию	`0`
Анимируемо	Да (неаддитивно)

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

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

Примечание: Например, если задано значение 45, положительная ось x маркера будет указывать вниз и вправо в системе координат фигуры.
<number>: Это значение указывает угол в градусах. Маркер ориентирован таким образом, что указанный угол является углом между положительной осью x фигуры и положительной осью x маркера.

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

Спецификация
Scalable Vector Graphics (SVG) 2 # OrientAttribute

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`orient`	1	12	1.5	15	3	18	4	14	2	1.0	4.4

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/orient