示例
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
对于 <circle> 元素，r 定义了圆的半径，因此也定义了它的大小。当值为零或更小时，圆将不会被绘制。
| 值 | <length> | <percentage> |
|---|---|
| 默认值 | 0 |
| 可动画的 | 是 |
注意： <circle> 元素的半径大小也可以通过 r 几何属性 来定义。
radialGradient
对于 <radialGradient> 元素，r 定义了径向渐变的结束圆的半径。
渐变将绘制，使得 100% 的渐变停止点映射到这个结束圆的周长上。值为零或更小时，该区域将以最后一个渐变 <stop> 的颜色和不透明度绘制为单一颜色。
| 值 | <length> |
|---|---|
| 默认值 | 50% |
| 可动画的 | 是 |
规范
| 规范 |
|---|
| Scalable Vector Graphics (SVG) 2 # RadialGradientElementRAttribute |
浏览器兼容性
svg.elements.circle.r
加载中…
svg.elements.radialGradient.r
加载中…
另见
- CSS
r属性