<radialGradient>

使用语境

属性

cx

此属性定义了径向渐变结束圆的 x 坐标。值类型：<length>；默认值：50%；可动画：是

cy

此属性定义了径向渐变结束圆的 y 坐标。值类型：<length>；默认值：50%；可动画：是

fr

此属性定义了径向渐变开始圆的半径。渐变将绘制，使得 0% 的 <stop> 映射到开始圆的周长。值类型：<length>；默认值：0%；可动画：是

fx

此属性定义了径向渐变开始圆的 x 坐标。值类型：<length>；默认值：与 cx 相同；可动画：是

fy

此属性定义了径向渐变开始圆的 y 坐标。值类型：<length>；默认值：与 cy 相同；可动画：是

渐变单位

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

渐变变换

此属性为渐变坐标系统提供了附加的 变换。值类型：<transform-list>；默认值：恒等变换；可动画：是

href

此属性定义了一个对另一个 <radialGradient> 元素的引用，该元素将被用作模板。值类型：<URL>；默认值：无；可动画：是

r

此属性定义了径向渐变结束圆的半径。渐变将绘制，使得 100% 的 <stop> 映射到结束圆的周长。值类型：<length>；默认值：50%；可动画：是

扩展方法

此属性指示当渐变开始或结束在包含渐变的形状边界内时，渐变的行为方式。值类型：pad | reflect | repeat；默认值：pad；可动画：是

xlink:href 已弃用

一个对另一个 <radialGradient> 元素的 <IRI> 引用，该元素将被用作模板。值类型：<IRI>；默认值：无；可动画：是

DOM 接口

此元素实现了 SVGRadialGradientElement 接口。

示例

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

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

规范

浏览器兼容性