SVGRadialGradientElement: fx 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 fx của giao diện SVGRadialGradientElement mô tả tọa độ trục x của tiêu điểm gradient hướng tâm dưới dạng SVGAnimatedLength. Nó phản ánh giá trị tính toán của thuộc tính fx trên phần tử <radialGradient>.
Giá trị thuộc tính là <length>, <percentage>, hoặc <number>. Giá trị số của SVGAnimatedLength.baseVal là tọa độ x của tiêu điểm gradient hướng tâm trong hệ tọa độ người dùng.
Giá trị
Một SVGAnimatedLength.
Ví dụ
Với SVG sau:
html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="gradient1" cx="50" cy="75" fx="30" fy="60" r="30">
<stop offset="0%" stop-color="blue" />
<stop offset="100%" stop-color="white" />
</radialGradient>
<radialGradient id="gradient2" cx="25%" cy="50%" fx="10%" fy="40%" r="10%">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="yellow" />
</radialGradient>
</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 fx:
js
const radialGradients = document.querySelectorAll("radialGradient");
const fxGradient1 = radialGradients[0].fx;
const fxGradient2 = radialGradients[1].fx;
console.dir(fxGradient1.baseVal.value); // output: 30
console.dir(fxGradient2.baseVal.value); // output: 20 (10% của 200)
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGRadialGradientElement__fx |