<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.

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

<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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
radialGradient
cx
cy
fr
fx
fy
gradientTransform
gradientUnits
href
r
spreadMethod
xlink:href
Deprecated

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Deprecated. Not for use in new websites.