<radialGradient>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

备注:不要与 CSS radial-gradient() 混淆,CSS 渐变只能应用在 HTML 元素上,而 SVG 渐变只能运用在 SVG 元素上。

示例

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

这个属性定义了 cxcyrfxfyfr 属性的坐标系统;值类型userSpaceOnUseobjectBoundingBox默认值objectBoundingBox动画性

gradientTransform

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

href

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

r

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

spreadMethod

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

xlink:href 已弃用

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

使用上下文

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

规范

Specification
Scalable Vector Graphics (SVG) 2
# RadialGradientElement

浏览器兼容性

BCD tables only load in the browser