r

r 屬性定義圓的半徑。

您可以將此屬性與以下 SVG 元素一起使用

當值為百分比時，它指的是當前 SVG 視口的標準化對角線。

示例

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
  <radialGradient r="0" id="myGradient000">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>
  <radialGradient r="50%" id="myGradient050">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>
  <radialGradient r="100%" id="myGradient100">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>

  <circle cx="50" cy="50" r="0" />
  <circle cx="150" cy="50" r="25" />
  <circle cx="250" cy="50" r="50" />

  <rect x="20" y="120" width="60" height="60" fill="url(#myGradient000)" />
  <rect x="120" y="120" width="60" height="60" fill="url(#myGradient050)" />
  <rect x="220" y="120" width="60" height="60" fill="url(#myGradient100)" />
</svg>

圓形

對於 <circle>，r 定義圓的半徑，從而定義其大小。如果值為零或小於零，則根本不會繪製圓形。

值	<length> \| <percentage>
預設值	`0`
可動畫	是

注意：<circle> 的半徑大小也可以使用 r 幾何屬性 定義。

徑向漸變

對於 <radialGradient>，r 定義徑向漸變的結束圓的半徑。

漸變將以這樣的方式繪製：100% 漸變停止對映到此結束圓的周長。零或小於零的值會導致該區域使用最後一個漸變 <stop> 的顏色和不透明度繪製為單一顏色。

值	<length> \| <percentage>
預設值	`50%`
可動畫	是

規範

規範
可縮放向量圖形 (SVG) 2 # R
可縮放向量圖形 (SVG) 2 # RadialGradientElementRAttribute