你见过去年年底Spotify分享的一个主题吗？他们通过图像颜色处理，达到一个令人折服的视觉审美效果。图像处理是一种非常强大的处理机制，在项目中添加一点小技巧，Web浏览器通过Web的过滤器可以动态处理图像色彩，这样将使你的项目能脱颖而出。

这是一篇关于如何使用不同的技术（包括CSS和SVG），为文本创建各种不同类型的（动态）填充和描边的教程。我想，未来已经在这里。我们在CSS和SVG已经有这么多令人兴奋的可能性，这些我们以前都只能是想想而已。例如，我们现在有很多方法可以用来创建包含动态填充的文本。

我最近在CodePen上发表了一个DEMO来庆祝新的一年，然后得到了很多积极的反馈，关于我如何使用viewBox来作为我的场景中的camera的。所以我决定来写一篇文章来介绍一下这个动画是如何创作的~

图标字体的使用在慢慢减少。最近很多人找出了不要使用字体图标的理由，并劝大家使用SVG图像。在《金融时报》（注：作者是一名《金融时报》的前端工程师），我们一致认为，总的来说，是时候探索作出一些转变了。

我之前谈到了一点关于SVG<use>的内容——使用它来创建图标系统。<use>的美妙之处在于你可以定义一次SVG，然后在其它地方可以对其多次引用。这种特性使得我们可以创建图标系统，解决“多张图仅需要发一次请求，因为这super高效”这个我们过去用CSS sprite和图标字体解决的问题。但是<use>意味着内联SVG。当你想要使用一个比较大的SVG文件中的一部分时，如使用SVG作为<img>或background-image引入。这就用到片段标识符啦。

写一次SVG代码，然后在多个地方重用，可以帮助你写出更多模块化的代码，而且它也有助于维护。通过tref元素，SVG可以很方便地重用text元素的内容。上周我大概讲解了tspan元素，并通过几个实例讲了如何使用它来单独给文本添加样式和定位。几个示例中都使用了位置属性——x、y、dx和dy，还提到了其它几个属性。我们现在来讲讲剩下的两个属性，然后再讲讲使用tref元素重用SVG文本。不过注意tref元素是SVG 1.1规范的一部分，它已经从SVG 2.0规范中删除了。我在这里介绍它，也许哪天你就碰到它了呢。

SVG的<text>元素允许你很简单地定位和给文本添加样式，但是如果你想要针对文本的不同部分定位和添加样式呢？难道我们要去创建多个text元素吗？不需要的。有更简单的方式，tspan来拯救世界了。前两周我们已经看了SVGtext元素，并整理了几个我们可以使用的属性。<text>元素不是唯一的SVG文本显示的方式。今天我们来讨论另外两种可以结合<text>元素使用的SVG元素——<tspan>和<tref>。

上周我们学习了如何使用<text>元素创建SVG文本。在实例中我们设置了x和y坐标来定位文本，也尝试了给SVG文本中的每个字符定位。关于<text>元素还有很多内容。在处理SVG文本时，不要局限于x和y属性。<text>元素还有几个可以添加的属性，现在我们开始讨论吧。

SVG文本是将图形和文本两者结合得最好的东西。它可以像其它图形元素一样渲染，这样你可以添加描边和填充，像图形、线条和箭头那样。它还可以被打包成XML字符数据，也就是说它是真的文本。

和图案一样，渐变可以给作品增加深度和趣味。虽然当前的趋势是扁平化设计，渐变还是很经常使用的。上节我们大概讲了线性渐变的内容。今天就到径向渐变啦。径向渐变和线性渐变是很相似的，区别只是在于如何定义渐变。