SVG orient Attribute
Last Updated :
31 Mar, 2022
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:
Share your thoughts in the comments
Please Login to comment...