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