語法
/* Initial value */
rx: auto;
/* Length and percentage values */
rx: 20px;
rx: 20%;
/* Global values */
rx: inherit;
rx: initial;
rx: revert;
rx: revert-layer;
rx: unset;
值
<length>、<percentage> 或 auto 關鍵字值表示橢圓的水平半徑和矩形的水平 border-radius。
<length>-
絕對或相對長度可以使用 CSS
<length>資料型別允許的任何單位表示。負值無效。 <percentage>-
百分比參照當前 SVG 視口寬度。
<rect>的使用值永遠不會超過矩形寬度的 50%。 auto-
當設定為
auto或預設值為auto時，rx值等於ry使用的絕對長度值。如果rx和ry的計算值都為auto，則使用值為0。
正式定義
正式語法
rx =
<length-percentage> |
auto
<length-percentage> =
<length> |
<percentage>
示例
建立圓角
此示例演示了透過將 rx 屬性應用於 SVG <rect> 元素來建立圓角矩形。
HTML
我們包含一個包含四個 <rect> 元素的 SVG 影像；所有矩形都相同，除了它們的 x 屬性值，該值決定它們沿 x 軸的位置。
<svg xmlns="http://www.w3.org/2000/svg">
<rect width="50" height="120" y="5" x="5" />
<rect width="50" height="120" y="5" x="60" />
<rect width="50" height="120" y="5" x="115" />
<rect width="50" height="120" y="5" x="170" />
<rect width="50" height="120" y="5" x="225" />
</svg>
CSS
使用 CSS，我們為四個矩形設定 rx 值
svg {
border: 1px solid;
}
rect:nth-of-type(2) {
rx: 10px;
fill: red;
}
rect:nth-of-type(3) {
rx: 2em;
fill: blue;
}
rect:nth-of-type(4) {
rx: 5%;
fill: orange;
}
rect:nth-of-type(5) {
rx: 80%;
fill: green;
}
結果
第一個矩形預設為 auto；由於此示例中的所有 ry 值也預設為 auto，因此 rx 的使用值為 0。紅色和藍色矩形分別具有 10px 和 2em 的圓角。由於 SVG 視口預設為 300px x 150px，橙色矩形的 5% 值建立了一個 15px 的半徑。綠色矩形設定了 rx: 80%。然而，由於 rx 的值永遠不會超過矩形寬度的 50%，因此效果就像設定了 rx: 50%; ry: 50% 一樣。
定義橢圓的水平半徑
這個基本的 <ellipse> 示例演示了 CSS rx 屬性優先於 SVG rx 屬性來定義形狀的水平半徑。
HTML
我們在一個 SVG 中包含兩個相同的 <ellipse> 元素；每個元素的 rx 屬性都設定為 20。
<svg xmlns="http://www.w3.org/2000/svg">
<ellipse cx="80" cy="50" rx="20" ry="40" />
<ellipse cx="80" cy="50" rx="20" ry="40" />
</svg>
CSS
我們只對第一個橢圓進行樣式設定，讓它的孿生兄弟使用預設的使用者代理樣式（fill 預設為黑色）。幾何 rx 屬性會覆蓋 SVG rx 屬性的值。我們還設定了 fill 和 stroke 屬性，以區分帶樣式形狀和它的孿生兄弟。
svg {
border: 1px solid;
}
ellipse:first-of-type {
rx: 80px;
fill: magenta;
stroke: rebeccapurple;
}
結果
帶樣式橢圓的水平半徑為 80px，如 CSS rx 屬性值所定義。未帶樣式橢圓的水平半徑為 20px，由 rx 屬性定義。
橢圓水平半徑百分比值
此示例演示了使用 rx 的百分比值。
HTML
我們使用與上一個示例相同的標記。
<svg xmlns="http://www.w3.org/2000/svg">
<ellipse cx="80" cy="50" rx="20" ry="40" />
<ellipse cx="80" cy="50" rx="20" ry="40" />
</svg>
CSS
CSS 與上一個示例相似，唯一的區別是 rx 屬性值；在這種情況下，我們使用百分比值。
svg {
border: 1px solid;
}
ellipse:first-of-type {
rx: 30%;
fill: magenta;
stroke: rebeccapurple;
}
結果
當 rx 使用百分比值時，這些值是相對於 SVG 視口寬度的。在這裡，帶樣式橢圓的水平半徑大小是當前 SVG 視口寬度的 30%。由於寬度預設為 300px，rx 值為 90px。
規範
| 規範 |
|---|
| Scalable Vector Graphics (SVG) 2 # RX |
瀏覽器相容性
載入中…
另見
- 幾何屬性：
rx、cx、cy、r、ry、x、y、width、height fillstrokepaint-orderborder-radius簡寫屬性radial-gradient<basic-shape>資料型別- SVG
rx屬性