Open In App

SVG orient Attribute

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 31 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads