<radialGradient>

<radialGradient> 用来定义径向渐变，以对图形元素进行填充或描边。

备注： 不要与 CSS radial-gradient() (en-US) 搞混了，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>

  <!-- 使用自定义的径向渐变 -->
  <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 (en-US)

这个属性定义了 cx、cy、r、fx、fy、fr 属性的坐标系统；值类型：userSpaceOnUse|objectBoundingBox；默认值：objectBoundingBox；动画性：有

gradientTransform (en-US)

这个属性为梯度坐标系提供了额外的变换。值类型：<transform-list> ；默认值：identity transform；动画性：有

href (en-US)

这个属性定义了对另一个将被用作模板 <radialGradient> 元素的引用。值类型：<URL>；默认值：none；动画性：有

r

这个属性定义了径向渐变的终点圆的半径。梯度的绘制将使 100% 的<stop> 被映射到终点圆的周长。值类型：<length>；默认值：50%；动画性：有

spreadMethod (en-US)

这个属性表明，如果渐变在包含渐变的形状的边界内开始或结束，它将如何表现。值类型：pad|reflect|repeat；默认值：pad；动画性：有

xlink:href (en-US)

已弃用: 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。

对另一个将被用作模板的 <radialGradient> 元素的 <IRI> 引用。值类型：<IRI>；默认值：none；动画性：有

全局属性

核心属性 (en-US): 最重要的：id
样式属性: class (en-US)、style
事件属性: 全局事件属性 (en-US)、文档元素事件属性 (en-US)
表现属性 (en-US): 最重要的：clip-path、clip-rule (en-US)、color、color-interpolation (en-US)、color-rendering、cursor (en-US)、display、fill、fill-opacity、fill-rule、filter、mask、opacity、pointer-events、shape-rendering、stroke、stroke-dasharray、stroke-dashoffset、stroke-linecap、stroke-linejoin、stroke-miterlimit、stroke-opacity、stroke-width、transform、vector-effect、visibility
XLink 属性: xlink:href (en-US)、xlink:title (en-US)

使用说明

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

规范

Specification
Scalable Vector Graphics (SVG) 2 # RadialGradients

浏览器兼容性

BCD tables only load in the browser