SVG orient Attribute

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:

Output:

Example 2:

Output: