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>
html, body, svg { height: 100%; }
<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 ifauto
where 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 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
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
orient | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support