SVGLinearGradientElement: x1 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.
Thuộc tính chỉ đọc x1 của giao diện SVGLinearGradientElement mô tả tọa độ trục x của điểm bắt đầu của gradient dưới dạng SVGAnimatedLength. Nó phản ánh giá trị tính toán của thuộc tính x1 trên phần tử <linearGradient>.
Giá trị thuộc tính là một <length>, <percentage>, hoặc <number>. Giá trị số của SVGAnimatedLength.baseVal là tọa độ x của điểm bắt đầu của gradient trong hệ tọa độ người dùng.
Giá trị
Một SVGAnimatedLength.
Ví dụ
Cho SVG sau:
html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient1" x1="50%" y1="0%" x2="50%" y2="100%">
<stop offset="0%" stop-color="blue" />
<stop offset="100%" stop-color="white" />
</linearGradient>
<linearGradient id="gradient2" x1="25%" y1="0%" x2="75%" y2="100%">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="yellow" />
</linearGradient>
</defs>
<rect x="0" y="0" width="200" height="100" fill="url(#gradient1)" />
<rect x="0" y="100" width="200" height="100" fill="url(#gradient2)" />
</svg>
Chúng ta có thể truy cập các giá trị tính toán của thuộc tính x1:
js
const linearGradients = document.querySelectorAll("linearGradient");
const x1Gradient1 = linearGradients[0].x1;
const x1Gradient2 = linearGradients[1].x1;
console.dir(x1Gradient1.baseVal.value); // output: 100 (50% của 200)
console.dir(x1Gradient2.baseVal.value); // output: 50 (25% của 200)
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGLinearGradientElement__x1 |