SVGMarkerElement: orient property

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

See full compatibility

The orient property of the SVGMarkerElement interface defines how the marker is rotated when it is placed at its position on the shape. It reflects the orient attribute value of the corresponding <marker> element.

Unlike SVGMarkerElement.orientType and SVGMarkerElement.orientAngle, which provide read-only access to the orientation and angle, respectively, the orient property allows you to get and set the orient attribute directly as a string.

Value

A string. Possible values are:

"auto": The marker is automatically rotated to follow the direction of the path at the point where it is placed.
"auto-start-reverse": If placed by marker-start, the marker is oriented at an angle 180° from the orientation that would be used if auto were specified. For all other markers, auto-start-reverse means the same as auto.
An <angle> value (e.g., "45deg"): The marker is rotated by the specified angle, measured from the horizontal.
A <number> value (e.g., "45"): The marker is oriented at the specified angle in degrees.

Examples

Accessing the `orient` property

html

<svg
  viewBox="0 0 100 100"
  width="300"
  height="300"
  xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker
      id="arrow"
      viewBox="0 0 10 10"
      refX="5"
      refY="5"
      markerWidth="12"
      markerHeight="12"
      orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>
  <polyline
    points="10,90 50,10 90,90"
    fill="none"
    stroke="black"
    marker-start="url(#arrow)"
    marker-mid="url(#arrow)"
    marker-end="url(#arrow)" />
</svg>
<output></output>

body {
  font-family: system-ui;
}

output {
  display: block;
  font: inherit;
  white-space: pre;
}

We can read the orient property and then set it to a new value:

const marker = document.querySelector("marker");
const log = document.querySelector("output");

if ("orient" in marker) {
  // Read the current orient value
  log.textContent = `orient: "${marker.orient}"\n`; // "auto-start-reverse"

  // Set a new orient value
  marker.orient = "90deg";
  log.textContent += `after setting "90deg": "${marker.orient}"`;
} else {
  log.textContent = "orient is not supported in this browser";
}

Specifications

Specification
Scalable Vector Graphics (SVG) 2 # __svg__SVGMarkerElement__orient

Browser compatibility

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`orient`	Chrome – No support Chrome footnote No support	Edge – No support Edge footnote No support	Firefox – No support Firefox footnote No support	Opera – No support Opera footnote No support	Safari – Full support Safari 13.1 (Release date: 2020-03-24) footnote Full support	Chrome Android – No support Chrome Android footnote No support	Firefox for Android – No support Firefox for Android footnote No support	Opera Android – No support Opera Android footnote No support	Safari on iOS – Full support Safari on iOS 13.4 (Release date: 2020-03-24) footnote Full support	Samsung Internet – No support Samsung Internet footnote No support	WebView Android – No support WebView Android footnote No support	WebView on iOS – Full support WebView on iOS 13.4 (Release date: 2020-03-24) footnote Full support

Tip: you can click/tap on a cell for more information.

Full support: Full support
No support: No support

SVGMarkerElement: orient property

Value

Examples

Accessing the orient property

Specifications

Browser compatibility

Legend

See also

Accessing the `orient` property