W3cubDocs

/Web APIs

SVGStopElement: offset property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

The offset read-only property of the SVGStopElement interface reflects the offset attribute of the given <stop> element.

Value

An SVGAnimatedNumber object.

Examples

Accessing the `offset` property

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="yellow" stop-opacity="1" />
      <stop offset="100%" stop-color="red" stop-opacity="1" />
    </linearGradient>
  </defs>
  <rect width="100%" height="100%" fill="url(#grad1)" />
</svg>

const stopElement = document.querySelector("stop");

// Access the offset property
console.log(stopElement.offset.baseVal); // Output: 0

Specifications

Specification
Scalable Vector Graphics (SVG) 2> # __svg__SVGStopElement__offset>

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
`offset`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	1.0	3	1