前端必知必会 | 学SVG看这篇就够了（六）

这是我参与8月更文挑战的第11天，活动详情查看：8月更文挑战html

这是SVG系列目录：

前言

在SVG中，并不是只能填充图形颜色和添加描边，你也能够像CSS同样，给绘制的图形应用添加渐变色。分为线性渐变、径向渐变，具体如何应用渐变色咱们进行看下去：前端

在SVG中咱们不能使用linear-gradient函数，这是无效代码！！！markdown

线性渐变

线性渐变是沿着直线改变颜色，咱们看一个线性渐变的例子：svg

<svg width="300" height="500">
    <defs>
        <linearGradient id="test">
            <stop offset="5%" stop-color="#12c2e9" />
            <stop offset="85%" stop-color="#c471ed" />
        </linearGradient>
    </defs>
    <rect fill="url(#test)" x="10" y="10" width="200" height="100"></rect>
</svg>
复制代码

咱们在画布中建立一个defs元素（稍后会讲到），在内部建立一个linearGradient标签（该标签用于定义线性渐变，应用于图形元素的填充、描边）。内部放了两个stop标签，这两个标签经过指定的位置offset属性和stop-color属性来讲明在渐变的特定位置上渲染指定的颜色。函数

这里要注意的是offset值是从0开始的，范围为0%—100%（或者是0—1），若是出现位置重合，将采用后面设置的值。post

stop标签一共有三个属性，上面咱们已经展现了stop标签的两个属性，还有一个stop-opacity属性，用于设置某个位置的透明度。url

<stop offset="85%" stop-color="gold" stop-opacity="0"/>
复制代码

使用渐变须要在图形标签上使用stroke 、fill进行引用，使用url引用元素的方式将渐变的ID值传入便可。（stroke也是一样操做）spa

linearGradient标签中你还能够定义渐变的开始和结束位置。它们分别是x1、x2、y1、y2。默认是水平渐变的，能够经过修改这些属性来改变渐变的方向，下面看看垂直渐变的例子：3d

<svg width="300" height="500">
    <defs>
        <linearGradient id="test" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="5%" stop-color="#12c2e9" />
            <stop offset="85%" stop-color="#c471ed" stop-opacity="0" />
        </linearGradient>
    </defs>
    <rect fill="url(#test)" x="10" y="10" width="200" height="100"></rect>
</svg>
复制代码

当 y1 和 y2 相等，而 x1 和 x2 不一样时，可建立水平渐变
当 x1 和x2 相等，而 y1 和 y2 不一样时，可建立垂直渐变
当 x1 和 x2 不一样，且 y1 和 y2 不一样时，可建立角形渐变

径向渐变

与线性渐变的用法相似，只不过是它是从一个点开始发散绘制渐变。咱们看看一个径向渐变的例子：code

<svg width="300" height="500">
    <defs>
        <radialGradient id="test">
            <stop offset="5%" stop-color="#0f0c29" />
            <stop offset="55%" stop-color="#302b63" />
        </radialGradient >
    </defs>
    <rect fill="url(#test)" x="10" y="10" width="100" height="100"></rect>
</svg>
复制代码

stop用法和线性渐变的用法是同样的，深蓝色如今正在向边缘的方向渐渐的变成灰白色。在线性渐变中咱们能够控制渐变的方向。一样，径向渐变中也能够控制渐变的中心点位置。它的属性有cx、cy、r、fx、fy，分别表明的是圆形中心点位置，半径、渐变边缘的位置（范围0—1）。

<svg width="300" height="500">
    <defs>
        <radialGradient id="test" cx="0" cy="0" r="0.5" fy="0.25" fx="0.25">
            <stop offset="0%" stop-color="#0f0c29" />
            <stop offset="100%" stop-color="#302b63" />
        </radialGradient >
    </defs>
    <rect fill="url(#test)" x="10" y="10" width="100" height="100"></rect>
</svg>
复制代码

defs and use

在上面的例子，外面使用了defs标签包裹了linearGradient标签，那这个defs标签有什么做用呢？

defs 标签是 definitions 的缩写，它可对诸如渐变之类的特殊元素进行定义。

defs

它用于预约义一个元素使其可以在SVG图像中重复使用。在defs元素中定义的图形不会直接呈现。你能够在你的视口的任意地方利用use标签呈现这些标签。

use

在defs标签中定义的图形不会直接显示在SVG图像上此时须要使用use元素来引入它们渲染到页面。

一个简单的使用例子：

<svg width="300" height="300">
    <defs>
        <g id="copyme">
            <circle r="10"/>
          </g>
    </defs>
    <use x="10" y="10" xlink:href="#copyme" />
    <use x="50" y="10" xlink:href="#copyme" />
</svg>
复制代码

最后

本篇文章讲述了在SVG中的如何在建立渐变，并引用到绘制的图形中，以后又扩展了defs和use标签相关知识，感谢你的阅读！

😀😀 关注我，不迷路！ 😀😀