Theorient attribute indicates how a marker is rotated when it is placed at its position on the shape.

You can use this attribute with the following SVG elements:

• <marker>

Example

html,body,svg {  height: 100%;}

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">  <defs>    <marker           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           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>

Usage notes

auto

This value indicates that the marker is oriented such that its positive x-axis is pointing in a direction relative to the path at the position the marker is placed.

auto-start-reverse

If placed bymarker-start, the marker is oriented 180° different from the orientation that would be used ifauto were specified. For all other markers,auto-start-reverse means the same asauto.

Note:This allows a single arrowhead marker to be defined that can be used for both the start and end of a path, i.e., which points outwards from both ends.

<angle>

This value indicates that the marker is oriented such that the specified angle is that measured between the shape's positive x-axis and the marker's positive x-axis.

Note:For example, if a value of45 is given, then the marker's positive x-axis would be pointing down and right in the shape's coordinate system.

<number>

This value indicates an angle in degrees. The marker is oriented such that the specified angle is that measured between the shape's positive x-axis and the marker's positive x-axis.

Specifications

Browser compatibility