SVG 径向渐变
SVG 径向渐变 - <radialGradient>
<radialGradient> 元素用于定义径向渐变（从一种颜色到另一种颜色、从一个方向到另一个方向的圆形过渡）。
渐变定义放在 <defs> 或 <svg> 元素中。<defs> 元素是“定义”的缩写，包含特殊元素（如渐变）的定义。
每个渐变都必须有一个 id 属性来标识渐变。然后图形/图像指向要使用的渐变。
径向渐变 1
一个带有从红色到蓝色径向渐变的椭圆
这是 SVG 代码
示例
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</radialGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
自己动手试一试 »
代码解释
<radialGradient>元素的id属性定义了渐变的唯一名称cx和cy属性定义了径向渐变结束圆的 x 和 y 位置fx和fy属性定义了径向渐变起始圆的 x 和 y 位置r属性定义了径向渐变结束圆的半径- 渐变的颜色由两个或多个
<stop>元素定义 <stop>中的offset属性定义了渐变停止点的位置<stop>中的stop-color属性定义了渐变停止点的颜色<ellipse>元素的fill属性将该元素指向“grad1”渐变
径向渐变 2
一个带有从红色到绿色再到蓝色径向渐变的椭圆
这是 SVG 代码
示例
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="red" />
<stop offset="50%" stop-color="green" />
<stop offset="100%" stop-color="blue" />
</radialGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>
自己动手试一试 »
径向渐变 3
一个带有从红色到蓝色径向渐变的椭圆（这里我们将结束圆的 x 和 y 位置设置为 25%）
这是 SVG 代码
示例
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grad3" cx="25%" cy="25%">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</radialGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad3)" />
</svg>
自己动手试一试 »
径向渐变 4 - spreadMethod="reflect"
一个带有从红色到蓝色径向渐变和 spreadMethod="reflect" 的椭圆
这是 SVG 代码
示例
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grad4" cx="25%" cy="25%" spreadMethod="reflect">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</radialGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad4)" />
</svg>
自己动手试一试 »
径向渐变 5 - spreadMethod="repeat"
一个带有从红色到蓝色径向渐变和 spreadMethod="repeat" 的椭圆
这是 SVG 代码
示例
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grad5" cx="25%" cy="25%" spreadMethod="repeat">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</radialGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad5)" />
</svg>
自己动手试一试 »
径向渐变 6
定义另一个带有从红色到蓝色径向渐变的椭圆
这是 SVG 代码
示例
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grad6" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="red" stop-opacity="0" />
<stop offset="100%" stop-color="blue" stop-opacity="1" />
</radialGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad6)" />
</svg>
自己动手试一试 »
代码解释
<stop>中的stop-opacity属性定义了渐变停止点颜色的不透明度
SVG <radialGradient> 属性
| Attribute | 描述 |
|---|---|
| id | 必需。定义 <radialGradient> 元素的唯一 id |
| cx | 径向渐变结束圆的 x 位置。默认为 50% |
| cy | 径向渐变结束圆的 y 位置。默认为 50% |
| fr | 径向渐变起始圆的半径。默认为 0% |
| fx | 径向渐变起始圆的 x 位置。默认为 50% |
| fy | 径向渐变起始圆的 y 位置。默认为 50% |
| r | 径向渐变结束圆的半径。默认为 50% |
| spreadMethod | 定义渐变的扩散方法。可能的值：“pad”、“reflect”、“repeat”。默认为“pad” |
| href | 定义对另一个 <radialGradient> 元素的引用，该元素将用作模板 |
| gradientUnits | 定义 cx、cy、r、fx、fy、fr 的坐标系统。可能的值：“userSpaceOnUse”和“objectBoundingBox”。默认为“objectBoundingBox” |
| gradientTransform | 定义对渐变坐标系统的额外变换 |
