前端必知必會 | 學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標籤相關知識，感謝你的閱讀！

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