r
語法
/* Length and percentage values */
r: 3px;
r: 20%;
/* Global values */
r: inherit;
r: initial;
r: revert;
r: revert-layer;
r: unset;
值
<length> 和 <percentage> 值定義了圓的半徑。
<length>-
絕對或相對長度可以使用 CSS
<length>資料型別允許的任何單位表示。負值無效。 <percentage>-
百分比指的是當前 SVG 視口歸一化對角線，計算方法為.
正式定義
正式語法
r =
<length-percentage>
<length-percentage> =
<length> |
<percentage>
示例
定義圓的半徑
在此示例中，SVG 中有兩個相同的 <circle> 元素，每個元素的半徑均為 10，並且其圓心的 x 軸和 y 軸座標也相同。
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="10" />
<circle cx="50" cy="50" r="10" />
</svg>
我們只使用 CSS 來設定第一個圓的樣式，讓第二個圓使用預設樣式（fill 預設為黑色）。我們使用 r 屬性來覆蓋 SVG r 屬性的值，併為它設定了 fill 和 stroke。SVG 的預設尺寸為 300px 寬和 150px 高。
svg {
border: 1px solid black;
}
circle:first-of-type {
r: 30px;
fill: lightgreen;
stroke: black;
}
ViewBox 與視口畫素
此示例包含兩個 SVG，每個 SVG 中都有兩個 <circle> 元素。第二個 SVG 包含一個 viewBox 屬性，以演示 SVG viewBox 和 SVG 視口之間的區別。
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="10" />
<circle cx="50" cy="50" r="10" />
</svg>
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="10" />
<circle cx="50" cy="50" r="10" />
</svg>
CSS 與上一個示例類似，設定了 r: 30px，但我們設定了 width 以確保兩個影像的寬度都是 300px。
svg {
border: 1px solid black;
width: 300px;
}
circle:first-of-type {
r: 30px;
fill: lightgreen;
stroke: black;
}
由於 viewBox 屬性將 SVG 定義為 200 SVG 座標系統畫素寬，而影像被放大到 300px，因此 30 SVG 座標畫素被縮放後渲染為 45 CSS 畫素。
使用百分比定義圓的半徑
在此示例中，我們使用與上一個示例相同的標記。唯一的區別是 r 的值；在這裡，我們使用一個百分比值。
svg {
border: 1px solid black;
width: 300px;
}
circle:first-of-type {
r: 30%;
fill: lightgreen;
stroke: black;
}
在這兩種情況下，圓的半徑都是 SVG 視口歸一化對角線的 30%。半徑 r 等於。雖然第一個影像使用的是 300 和 150 CSS 畫素，第二個使用的是 200 和 100 SVG viewBox 單位，但 30% 是一個比例值。因此，r 的值是相同的：47.43 viewBox 單位，解析為 71.15 CSS 畫素。
雖然 r 是相同的，但圓心點不同，因為第二個 SVG 被放大了 50%，導致其圓心向右下方移動了 50%。
規範
| 規範 |
|---|
| Scalable Vector Graphics (SVG) 2 # R |
瀏覽器相容性
載入中…
另見
- 幾何屬性：
r、cx、cy、rx、ry、x、y、width、height fillstrokepaint-orderborder-radius簡寫屬性radial-gradient<basic-shape>資料型別- SVG
r屬性