SVG 应用:Gradient (线性渐变) 在文字中的应用
发布在SVG开发与应用2016年11月8日view:461svg
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

最近做了一个关于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

评论
发表评论
暂无评论
WRITTEN BY
聆木听风
前端攻城师~~~!
TA的新浪微博
PUBLISHED IN
SVG开发与应用

专注于分享 svg 使用经验、技巧、以及教程的网站。

当然,这里不止于SVG,对于SVG动效设计的最佳搭档的GreenSock、Snapsvg、Mojs等动效js也会进行涉猎。

投资在学习上的时间总有一天会回赠给你自己 !

我的收藏