cy
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 cy xác định tọa độ trục y của một điểm tâm.
Bạn có thể dùng thuộc tính này với các phần tử SVG sau:
Note:
Với vai trò là một geometry property, cy cũng có thể được dùng làm thuộc tính CSS cho <circle> và <ellipse>.
Ví dụ
<svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg">
<radialGradient cy="25%" id="myGradient">
<stop offset="0" stop-color="white" />
<stop offset="100%" stop-color="black" />
</radialGradient>
<circle cy="50" cx="50" r="45" />
<ellipse cy="150" cx="50" rx="45" ry="25" />
<rect x="5" y="205" width="90" height="90" fill="url(#myGradient)" />
</svg>
circle
Đối với <circle>, cy xác định tọa độ trục y của tâm hình dạng.
| Giá trị | <length-percentage> |
|---|---|
| Giá trị mặc định | 0 |
| Có thể animate | Có |
Note:
Tọa độ trục y của tâm <circle> cũng có thể được xác định bằng thuộc tính geometry property cy. Nếu được đặt trong CSS, giá trị thuộc tính cy trong CSS sẽ ghi đè giá trị thuộc tính cy.
ellipse
Đối với <ellipse>, cy xác định tọa độ trục y của tâm hình dạng.
| Giá trị | <length-percentage> |
|---|---|
| Giá trị mặc định | 0 |
| Có thể animate | Có |
Note:
Tọa độ trục y của tâm <ellipse> cũng có thể được xác định bằng thuộc tính geometry property cy. Nếu được đặt trong CSS, giá trị thuộc tính cy trong CSS sẽ ghi đè giá trị thuộc tính cy.
radialGradient
Đối với <radialGradient>, cy xác định tọa độ trục y của đường tròn cuối cùng cho radial gradient.
| Giá trị | <length> |
|---|---|
| Giá trị mặc định | 50% |
| Có thể animate | Có |
Ví dụ
<svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient cy="0" id="myGradient000">
<stop offset="0%" stop-color="gold" />
<stop offset="50%" stop-color="green" />
<stop offset="100%" stop-color="white" />
</radialGradient>
<radialGradient cy="50%" id="myGradient050">
<stop offset="0%" stop-color="gold" />
<stop offset="50%" stop-color="green" />
<stop offset="100%" stop-color="white" />
</radialGradient>
<radialGradient cy="100%" id="myGradient100">
<stop offset="0%" stop-color="gold" />
<stop offset="50%" stop-color="green" />
<stop offset="100%" stop-color="white" />
</radialGradient>
</defs>
<rect
x="1"
y="1"
width="8"
height="8"
fill="url(#myGradient000)"
stroke="black" />
<rect
x="13"
y="1"
width="8"
height="8"
fill="url(#myGradient050)"
stroke="black" />
<rect
x="25"
y="1"
width="8"
height="8"
fill="url(#myGradient100)"
stroke="black" />
</svg>
Thông số kỹ thuật
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # RadialGradientElementCYAttribute |