<radialGradient>
<radialGradient>
用来定义径向渐变,以对图形元素进行填充或描边。
备注: 不要与 CSS radial-gradient()
(en-US) 搞混了,CSS 渐变只能应用在 HTML 元素上,而 SVG 渐变只能运用在 SVG 元素上。
示例
<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
- 事件属性
- 表现属性
-
最重要的:
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