示例
html
<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="50" ry="0" rx="25" />
<ellipse cx="150" cy="50" ry="25" rx="25" />
<ellipse cx="250" cy="50" ry="50" rx="25" />
<rect x="20" y="120" width="60" height="60" ry="0" rx="15" />
<rect x="120" y="120" width="60" height="60" ry="15" rx="15" />
<rect x="220" y="120" width="60" height="60" ry="150" rx="15" />
</svg>
ellipse
對於 <ellipse> 元素,ry 定義了形狀的 y 軸半徑。如果值為零或更小,則橢圓將完全不被繪製。
| 值 |
<length> | <percentage> | auto |
|---|---|
| 預設值 | auto |
| 可動畫的 | 是 |
注意:<ellipse> 元素的 y 軸半徑也可以透過 ry 幾何屬性來定義。如果透過 CSS 設定,ry 屬性值將覆蓋 ry 屬性值。
rect
對於 <rect> 元素,ry 定義了用於圓角矩形角的橢圓的 y 軸半徑。
ry 屬性值的解釋方式取決於 rx 屬性以及矩形的寬度。
- 如果為
ry提供了有效值但未為rx提供值(反之亦然),則瀏覽器將把缺失的值視為與已定義的值相等。 - 如果
ry和rx都沒有提供有效值,則瀏覽器將繪製一個具有直角的矩形。 - 如果
ry大於矩形寬度的一半,則瀏覽器會將ry的值視為矩形寬度的一半。
| 值 |
<length> | <percentage> | auto |
|---|---|
| 預設值 | auto |
| 可動畫的 | 是 |
注意:<rect> 元素的垂直圓角也可以透過 ry 幾何屬性來定義。如果透過 CSS 設定,ry 屬性值將覆蓋 ry 屬性值。
規範
| 規範 |
|---|
| Scalable Vector Graphics (SVG) 2 # RY |
另見
- CSS
ry屬性