<radialGradient>

<radialGradient> 元素允许作者定义径向渐变，可以将其应用于图形元素的填充或描边。

注意：不要与 CSS radial-gradient() 混淆，因为 CSS 渐变只能应用于 HTML 元素，而 SVG 渐变只能应用于 SVG 元素。

示例

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

html

<svg
  viewBox="0 0 10 10"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <radialGradient id="myGradient">
      <stop offset="10%" stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </radialGradient>
  </defs>

  <!-- using my radial gradient -->
  <circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>

属性

cx: 此属性定义径向渐变结束圆的 x 坐标。值类型：<length> ; 默认值：50%; 可动画：是
cy: 此属性定义径向渐变结束圆的 y 坐标。值类型：<length> ; 默认值：50%; 可动画：是
fr: 此属性定义径向渐变开始圆的半径。渐变将绘制成 0% <stop> 映射到开始圆的周长。值类型：<length> ; 默认值：0%; 可动画：是
fx: 此属性定义径向渐变开始圆的 x 坐标。值类型：<length> ; 默认值：与 cx 相同；可动画：是
fy: 此属性定义径向渐变开始圆的 y 坐标。值类型：<length> ; 默认值：与 cy 相同；可动画：是
gradientUnits: 此属性定义 cx、cy、r、fx、fy、fr 属性的坐标系。值类型：userSpaceOnUse|objectBoundingBox ; 默认值：objectBoundingBox; 可动画：是
gradientTransform: 此属性为渐变坐标系提供额外的变换。值类型：<transform-list> ; 默认值：恒等变换；可动画：是
href: 此属性定义对另一个 <radialGradient> 元素的引用，该元素将用作模板。值类型：<URL> ; 默认值：无；可动画：是
r: 此属性定义径向渐变结束圆的半径。渐变将绘制成 100% <stop> 映射到结束圆的周长。值类型：<length> ; 默认值：50%; 可动画：是
扩展方法: 此属性指示如果渐变开始或结束在包含渐变的形状的边界内，则渐变的行为。值类型：pad|reflect|repeat ; 默认值：pad; 可动画：是
xlink:href 已弃用: 对另一个 <radialGradient> 元素的 <IRI> 引用，该元素将用作模板。值类型：<IRI> ; 默认值：无；可动画：是

使用上下文

类别	渐变元素
允许内容	以下元素的任意数量，按任意顺序描述性元素 `<animate>`、`<animateTransform>`、`<set>`、`<stop>`

规范

规范
可缩放矢量图形 (SVG) 2 # 径向渐变

浏览器兼容性

BCD 表格仅在浏览器中加载