fy
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Thuộc tính fy xác định tọa độ trục y của tiêu điểm cho một radial gradient.
Bạn có thể dùng thuộc tính này với phần tử SVG sau:
Ví dụ
Ví dụ 1
html
<svg viewBox="0 0 480 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient
id="gradient1"
cx="0.5"
cy="0.5"
r="0.5"
fx="0.35"
fy="0.35"
fr="5%">
<stop offset="0%" stop-color="white" />
<stop offset="100%" stop-color="darkseagreen" />
</radialGradient>
<radialGradient
id="gradient2"
cx="0.5"
cy="0.5"
r="0.5"
fx="0.35"
fy="0.75"
fr="5%">
<stop offset="0%" stop-color="white" />
<stop offset="100%" stop-color="darkseagreen" />
</radialGradient>
</defs>
<circle cx="100" cy="100" r="100" fill="url(#gradient1)" />
<circle cx="340" cy="100" r="100" fill="url(#gradient2)" />
</svg>
Ví dụ 2
html
<svg
viewBox="0 0 120 120"
width="200"
height="200"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient
id="Gradient"
cx="0.5"
cy="0.5"
r="0.5"
fx="0.35"
fy="0.35"
fr="5%">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</radialGradient>
</defs>
<rect
x="10"
y="10"
rx="15"
ry="15"
width="100"
height="100"
fill="url(#Gradient)"
stroke="black"
stroke-width="2" />
<circle
cx="60"
cy="60"
r="50"
fill="transparent"
stroke="white"
stroke-width="2" />
<circle cx="35" cy="35" r="2" fill="white" stroke="white" />
<circle cx="60" cy="60" r="2" fill="white" stroke="white" />
<text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">
(fx,fy)
</text>
<text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">
(cx,cy)
</text>
</svg>
Lưu ý sử dụng
Thông số kỹ thuật
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # RadialGradientElementFYAttribute |