orient

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

Only one element is using this attribute: <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>

Usage notes

Value auto | auto-start-reverse | <angle> | <number>
Default value 0
Animatable Yes (non-additive)
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 by marker-start, the marker is oriented 180° different from the orientation that would be used if auto where specified. For all other markers, auto-start-reverse means the same as auto.

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 of 45 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

Specification Status Comment
Scalable Vector Graphics (SVG) 2
The definition of 'orient' in that specification.
Candidate Recommendation Added the auto-start-reverse value and simplified the descriptions of the values.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'orient' in that specification.
Recommendation Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
orientChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support