SVG 應用：Gradient (線性漸變) 在文字中的應用

最近作了一個關於SVG的應用的技術分享網站svgtrick.com，會同步一些文章到這裏來，更多的能夠去網站看看。

在SVG中，文字的顏色使用fill屬性來定義，它不只能夠填充通常的顏色，也可使用漸變顏色來填充文字等等。相比CSS，使用SVG能夠更加靈活的實現CSS沒法實現的文字效果。這篇文章就來說講SVG中的漸變主要是指線性漸變在文字中的應用。

SVG中插入文字

在SVG中插入文字很是簡單，使用text標籤就能夠了，以下所示：

<svg viewBox="0 0 600 300"> <text text-anchor="middle" x="50%" y="50%" dy=".35em" class="text" > SVG </text> 
</svg>

簡單介紹下在SVG中text元素的幾個屬性。

text-anchor即文本的錨點，用於決定文本顯示在相對於文本的x屬性肯定的位置的位置。 默認狀況下文本的錨點在文本的左邊緣，即文本開始的位置。可是錨點也能夠設置在文本的中間位置或者是文本結束的位置。

能夠經過text-anchor樣式屬性來肯定文本的錨點。它的值能夠設置爲：start, middle 和 end。

text元素經過x,y屬性來定位文本的位置。 x屬性肯定了文本的左邊緣（文本開始的位置）放置在什麼地方。 y屬性肯定了文本的下邊緣（不是上部）放置在什麼地方。這樣，經過y屬性來定位文本和其它像直線、矩形或者其餘圖形就產生了不一樣。

x,y和dx,dy之間的差別，一個是絕對位置，一個是相對位置，x,y是基於本來的位置去改變，而dx,dy是基於前一個字的位置去作移動。

在上面的代碼中，咱們使用text標籤插入了ISUX這四個文字，結果以下圖所示：（具體代碼能夠點擊demo連接查看）：

DEMO

在SVG中使用漸變來填充文字

在SVG中，文字的顏色使用fill屬性來定義，它不只能夠填充通常的顏色，也可使用漸變顏色來填充文字等等。要使用漸變顏色來填充文字，首先在SVG中使用linearGradient來定義一個漸變，代碼以下：

<linearGradient id="gr-simple" x1="0" y1="0" x2="100%" y2="100%"> <stop stop-color="hsl(50, 100%, 70%)" offset="10%"/> <stop stop-color="hsl(320, 100%, 50%)" offset="90%"/> </linearGradient>

在SVG中linearGradient漸變一些屬性的具體含義：

x1,y1,x2,y2：

x1,y1就是漸變色的起點，x2,y2就是漸變色的終點，數值是0~1 的數字（能夠是小數），或者是0%到100%的數值，至於要如何來肯定填充內容的stop offset呢？能夠參考下面這張示意圖，x1,y1,x2,y2是指整個漸變填色的區域位置，而stop offset則是在填色區域內的0%~100％。

x1="0",y1="0" 或 x1="0%" y1="0%" 表示從左上開始，x2="1" y2="1" 或 x2="100%" y2="100%" 表示在右下角結束，即從左上角到右下角的漸變，利用它咱們能夠作出很豐富的漸變。

定義好漸變顏色以後，就可使用fill屬性來引用咱們在上面定義的漸變顏色來填充文字，只需使用URL要引用漸變的ID就能夠了：

<svg viewBox="0 0 600 300"> <text text-anchor="middle" x="50%" y="50%" dy=".35em" class="text" fill="url(#gr-simple)" > ISUX </text> </svg>

或者是在CSS中使用fill來填充，效果也同樣：

.text { fill: url(#gr-simple); }

DEMO