SVGLinearGradientElement: x2 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 x2 read-only property of the SVGLinearGradientElement interface describes the x-axis coordinate of the start point of the gradient as an SVGAnimatedLength. It reflects the computed value of the x2 attribute on the
The attribute value is a SVGAnimatedLength.baseVal is the x-coordinate of the gradient's end point in the user coordinate system.
Value
Example
Given the following SVG:
html
We can access the computed values of the x2 attributes:
js
const linearGradients = document.querySelectorAll("linearGradient");
const x2Gradient1 = linearGradients[0].x2;
const x2Gradient2 = linearGradients[1].x2;
console.dir(x2Gradient1.baseVal.value); // output: 100 (50% of 200)
console.dir(x2Gradient2.baseVal.value); // output: 150 (75% of 200)
Specifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGLinearGradientElement__x2 |