Baseline Widely available *

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

* Some parts of this feature may have varying levels of support.

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

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

示例

html

属性

cx

这个属性定义了径向渐变的终点圆的 X 坐标。值类型：；默认值：50%；动画性：有

cy

这个属性定义了径向渐变的终点圆的 Y 坐标。值类型：；默认值：50%；动画性：有

fr

这个属性定义了径向梯度的起点圆的半径。渐变的绘制将使 0% 被映射到起始圆的周长。值类型：；默认值：0%；动画性：有

fx

这个属性定义了径向渐变的起点圆的 X 坐标。值类型：；默认值：与 cx 相同；动画性：有

fy

这个属性定义了径向渐变的起点圆的 Y 坐标。值类型：；默认值：与 cy 相同；动画性：有

gradientUnits

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

gradientTransform

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

href

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

r

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

spreadMethod

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

xlink:href

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

使用上下文

类别渐变元素
允许的内容任意数量、任意顺序的下列元素：
描述性元素
、、、