SVG 径向渐变
2021-01-21 本文已影响0人
暖A暖
上一节我们讲的是线性渐变，本节我们来学习径向渐变。径向渐变可以理解为以某一点为圆心，颜色值沿半径方向进行渐变。
如何创建径向渐变
我们可以通过 <radialGradient> 元素创建一个 SVG 的径向渐变。径向渐变的使用其实和线性渐变差不多，也是嵌套在 <defs> 元素中使用，在使用时需要定义一个唯一的 id 名称，然后通过 fill 属性引用。
示例：
定义一个径向渐变的圆：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG学习(9xkd.com)</title>
<link rel="styleSheet" type="text/css" href="./style.css">
</head>
<body>
<svg width="500" height="300">
<defs>
<radialGradient id="radia" cx="50%" cy="50%" r="40%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(110, 244, 248); "/>
<stop offset="70%" style="stop-color:rgb(212, 129, 194); "/>
<stop offset="100%" style="stop-color:rgb(243, 204, 132); "/>
</radialGradient>
</defs>
<circle fill="url(#radia)" cx="200" cy="120" r="100" />
</svg>
</body>
</html>
在浏览器中的演示效果：
上述代码中在 <radialGradient> 元素中定义了一个id 属性，方便后面的引用。<radialGradient> 内通过 <stop> 元素定义了三个颜色，<stop> 元素中的三个属性在上一节中讲到过。
除此之外， <radialGradient> 元素中的参数和 <linearGradient> 元素中的属性还是有一些不同，如下所示：
| 属性 | 描述 |
|---|---|
| r | 圆的半径 |
| cx | 渐变的中心点 x 坐标，要移动渐变的位置，可以改变这个值 |
| cy | 渐变的中心点 y 坐标，要移动渐变的位置，可以改变这个值 |
| fx | 渐变的焦点 x 坐标，可以用于移动渐变第一个颜色结点的位置 |
| fy | 渐变的焦点 y 坐标，可以用于移动渐变第一个颜色结点的位置 |
| fr | 定义径向渐变的焦点的半径，默认值为 0% |
示例：
例如创建一个椭圆渐变：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG学习(9xkd.com)</title>
<link rel="styleSheet" type="text/css" href="./style.css">
</head>
<body>
<svg width="500" height="300">
<defs>
<radialGradient id="radia" cx="40%" cy="50%" r="50%" fx="40%" fy="50%" >
<stop offset="0%" style="stop-color:rgb(206, 88, 108); "/>
<stop offset="50%" style="stop-color:rgb(80, 181, 206); "/>
<stop offset="70%" style="stop-color:rgb(233, 199, 125); "/>
<stop offset="90%" style="stop-color:rgb(189, 138, 236); "/>
<stop offset="100%" style="stop-color:rgb(152, 252, 190); "/>
</radialGradient>
</defs>
<ellipse fill="url(#radia)" cx="250" cy="100" rx="150" ry="100"></ellipse>
</svg>
</body>
</html>
在浏览器中的演示效果：
这个椭圆渐变中定义了五个颜色，然后通过 cx 和 cy 确定渐变中心点位置，fx 和 fy 确定渐变第一个颜色的结点的位置。
