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" <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" <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: