【CSS】SVG（九）——渐变这是我参与11月更文挑战的第18天，活动详情查看：2021最后一次更文挑战 SVG（九）—

这是我参与11月更文挑战的第18天，活动详情查看：2021最后一次更文挑战

SVG（九）——渐变

（9）渐变

SVG的填充色太单调了，当我们想要在SVG中实现渐变色填充，应该怎么办呢

尝试使用CSS3的渐变属性linear-gradient来实现，发现没有效果

这时候我们就要用到SVG中的渐变标签了

SVG中的渐变标签有两种
- 一种用于定义线性渐变Linear
- 一种用于定义径向渐变Radial
对于线性渐变
- 语法：：<linearGradient id="linear" x1="x1" y1="y1" x2="x2" y2="y2">
- 属性值：
  - id：定义当前线性渐变唯一标识
  - (x1,y1)和(x2,y2)：通过两个点的关系来确定线性渐变的方向
    - (x1,y1)为起点，(x2,y2)为终点
    - 当横坐标x1 == x2，可以创建一条垂直的线性渐变
    - 当纵坐标y1 == y2，可以创建一条水平的线性渐变
- 颜色：
  - 渐变至少包含两种颜色，在<linearGradient>标签里，通过<stop>标签来定义颜色
  - 语法：<stop offset="$offset" stop-color="$color" stop-opacity="$opacuty">
    - offset：用于定义当前颜色的开始位置
    - stop-color：用于定义当前渐变的颜色
    - stop-opacity：用于定义当前位置的透明度
      需要注意：
      
      offset只能设置在标签上，默认为0%，其规则同CSS3中的渐变规则
      
      stop-color、stop-opacity也可以在class或者style中设置
  - 需要多少颜色，就需要多少<stop>标签
- 使用：
  - 在对应的形状元素上，通过fill——设置填充色的属性，来引入相应的渐变
  - 引入方式：fill=url(#id)
  除此之外，stroke描线颜色也可以使用这种方式来设置渐变色
- 示例：
```
<svg>
    <linearGradient id="linear1" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" stop-color="red"/>
        <stop offset="100%" stop-color="orange" />
    </linearGradient>
    <path fill="url(#linear1)" d="M 100 50,L 50 100,L 100 150,L 150 100,L 100 50,L 75 100,L 100 125,L 125 100,Z" />
</svg>
```
  - 把线条也加上
```
<linearGradient id="linear2" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="blue"/>
    <stop offset="100%" stop-color="green" />
</linearGradient>
```
```
.path {
    fill: url(#linear1);
    stroke:url(#linear2);
    stroke-width: 5;
}
```
对于径向渐变

径向渐变与线性渐变类似
- 语法：<radialGradient id="radial" cx="x1" cy="y1" r="r" fx="x2" fy="y2">
- 属性值：
  - id：用于定义当前径向渐变的唯一标识
  - cx、cy：用于定义径向渐变的圆心——即渐变范围的中心
  - fx、fy：用于定义径向渐变的焦点——即渐变颜色的中心
  - r：用于定义径向渐变的半径
    - 可设置0%~100%的百分比值、或者0~1的数值
    - 它和(cx,cy)一起定义了渐变的范围和位置
- 颜色：
  - 同线性渐变
- 使用：
  - 同线性渐变
- 示例：
  - 为了便于理解，这里会将渐变色部分取消，使用纯色代替
```
<svg>
    <radialGradient id="radial1" cx="50%" cy="50%" r="25%">
        <stop offset="0%" stop-color="red"/>
        <stop offset="40%" stop-color="red"/>
        <stop offset="40%" stop-color="orange"/>
        <stop offset="100%" stop-color="orange" />
        <stop offset="100%" stop-color="transparent" />
    </radialGradient>
    <path fill="url(#radial1)" d="M 100 50,L 50 100,L 100 150,L 150 100,L 100 50,L 75 100,L 100 125,L 125 100,Z" />
</svg>
```
  (cx,cy)表示圆心的位置，设置为50%表明圆心位于SVG的中心
  
  r表示圆的半径，以SVG的长宽为基准，即此处设置为25%，表示圆的X轴方向上的半径为X轴的25%，Y轴方向上为Y轴的25%
  - 注，因为此处为规则图形，所以此处圆是正圆形，若SVG图形不规则，那么径向渐变圆也会相应扭曲
  - 此处半径为25%，则圆的直径就占50%（占据两个方格）
  此处颜色设置为纯色，无渐变色区间
  
  按<stop>标签顺序：
  - 红色占据0%~40%区间
  - 橙色占据40%~100%区间
  对于SVG图形内，圆的范围之外的颜色，若没有设置其它颜色，则默认为设置为最后一个颜色填充
  - 这里设置了100%之后为transparent，即透明色
  - 如果没有设置，则默认为橙色填充
  - 接下来看看圆心改变的效果
```

<radialGradient id="radial1" cx="0%" cy="50%" r="25%"></radialGradient>
<radialGradient id="radial1" cx="50%" cy="0%" r="25%"></radialGradient>
<radialGradient id="radial1" cx="100%" cy="50%" r="25%"></radialGradient>
<radialGradient id="radial1" cx="50%" cy="100%" r="25%"></radialGradient>
```
  - 接下来，再来看看焦点改变的效果
    - 焦点由(fx,fy)来设置，默认与圆心的位置一致
```
<radialGradient id="radial1" cx="50%" cy="50%" r="25%" fx="25%" fy="50%"></radialGradient>
<radialGradient id="radial1" cx="50%" cy="50%" r="25%" fx="50%" fy="25%"></radialGradient>
<radialGradient id="radial1" cx="50%" cy="50%" r="25%" fx="75%" fy="50%"></radialGradient>
<radialGradient id="radial1" cx="50%" cy="50%" r="25%" fx="50%" fy="75%"></radialGradient>
```
    焦点改变的是渐变色的起点位置
    - 表示从焦点处开始向外部形状渲染渐变色
    - 而如果焦点在渐变形状之外，则渐变可能无法正确显示
```
<radialGradient id="radial1" cx="50%" cy="50%" r="25%" fx="0%" fy="50%"></radialGradient>
```