SVG 径向渐变
SVG 径向渐变 - <radialGradient>
The <radialGradient> 元素用于定义径向渐变（从一个颜色到另一个颜色，从一个方向到另一个方向的圆形过渡）。
渐变定义放置在 <defs> 或 <svg> 元素内。The <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>
自己尝试一下 »
代码解释
- The
id属性 of the<radialGradient>元素为渐变定义了一个唯一的名称 - The
cx和cy属性定义了径向渐变结束圆形的 x 和 y 位置 - The
fx和fy属性定义了径向渐变开始圆形的 x 和 y 位置 - The
r属性定义了径向渐变结束圆形的半径 - 渐变的颜色用两个或多个
<stop>元素定义 - The
offset属性在<stop>中定义了渐变停止点的位置 - The
stop-color属性在<stop>中定义了渐变停止点的颜色 - The
fill属性 of the<ellipse>元素将元素指向“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>
自己尝试一下 »
代码解释
- The
stop-opacity属性在<stop>中定义了渐变停止点颜色的不透明度
SVG <radialGradient> 属性
| 属性 | 描述 |
|---|---|
| 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 | 定义对渐变坐标系的额外变换 |
