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