The orient attribute shows, how a marker is rotated when it is placed at its position on the shape. Only <marker> element is using this attribute.
Syntax:
orient = auto | auto-start-reverse | angle | number
Attribute Values: The orient attribute accepts the values mentioned above and described below
- auto: It shows 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 this attribute is used with marker-start, the marker is oriented 180° different from the orientation that would be used if auto was specified.
- angle: The specified angle is the measure between the positive x-axis of the shape and the marker.
- number: It shows an angle in degrees.
Below examples illustrate the use of the orient attribute.
Example 1:
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<svg viewBox="-30 30 800 100"
xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="geek" viewBox="0 0 10 10"
refX="5" refY="5" markerWidth="7"
markerHeight="7" orient="90deg">
<path d="M 0 0 L 10 5 L 0 10 z"
fill="green" />
</marker>
</defs>
<polyline points="0, 40 40, 40 40, 80 80,
80 80, 120 120, 120 120"
style="fill:white;stroke:green;"
marker-start="url(#geek)"
marker-mid="url(#geek)"
marker-end="url(#geek)" />
</svg>
</body>
</html>
Output:
Example 2:
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<svg viewBox="-30 0 800 100"
xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="arrow"
viewBox="0 0 10 10"
refX="5" refY="5"
markerWidth="7"
markerHeight="7" fill="green"
orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
</defs>
<polyline points="2, 2 2, 60 60, 90"
fill="none" stroke="green"
marker-start="url(#arrow)"
marker-end="url(#arrow)" />
</svg>
</body>
</html>
Output:
