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