SVG图形的一个最常见用例是图标系统，其中最常用的SVG sprite技术就是使用SVG<use> 元素在文档中任意位置“实例化”图标。使用<use>元素实例化图标或任何其它的SVG元素或图像，给元素添加样式时经常会碰到一些问题。这篇文章的目的是尽可能给你介绍一些方法来解决：使用<use>引入的内容添加样式受限的问题。但是在开始之前，我们先快速浏览一下SVG的主要结构和分组元素，然后慢慢进入use的世界中，以及shadow DOM，然后重回CSS的怀抱。我们会逐步讲解为什么给<use>内容添加样式会比较麻烦，以及有什么好的解决方案。

在这个系列教程的前两篇文章中，我们比较了CSS和SVG创建图形文本、复选框和单选按钮的技术与效果。在这篇文章中将介绍CSS和SVG对比技术中的另一个技术——创建图形UI组件的技术。具体地说，我们将要讨论的是如何创建圆形菜单效果，因为这是非矩形UI组件的典型案例。

这是CSS技术和SVG技术对比系列教程中最后一篇。本文选取了几个CSS和SVG的解决方案，而不是一个解决方案——使用CSS和SVG实现。有关于解决方案的每个细节已经有很多这方面的优秀文章，如果你感兴趣的话，可以阅读有关于这个系列的所有文章。

运气爆棚的我总是时不时地能创建出大家都喜欢的案例。SVG Lava Lamp就是其中之一——因为很多人问我关于这个灯的文字，所以我决定写这篇文章来给大家解释解释。一眼看去，这篇教程好像会有很多很多的代码——其实不是这样的。我只是在不停地粘贴相同的代码，所以代码量会慢慢增加，看起来也就好像代码量很大了。还有标题看起来也挺好笑的——虽然我喜欢开玩笑，但也不会影响到后边各小节的内容，它们其实还是挺简单的。如果觉得它们倒了你的胃口，或者你的母语不是英语的话（无法理解我），我还是赶紧先在这里道个歉吧哈哈。

如果我告诉你存在一种图像格式和GIF一样，但它是矢量格式的？如果我告诉你这个动画的方向还可以反转？如果我告诉你可以直接拿一张普通的图像，然后让它里边的每一个不同的部分都单独地动起来，而且不同部分的速度也不一样？其实，这种图像格式就是SVG，而且已经存在，并不是我想象出来的，只是还需要一点点温柔的鼓励。

图案是非常常用的设计元素。它可以提供对比，创建一个深度感，并给组合添加趣味。SVG可以很方便地创建和使用图案，随心所欲~我上次提到了这周要讨论一个可以定义并重用的元素，就是pattern啦。这篇文章我们要讨论<pattern>元素，以及如何在SVG中使用这个元素。大概会讲SVG图案的基础，然后下一篇讲解如何创建复杂一些的图案。

网页设计元素之一——图案，通常是使用图片创建的。虽然一些图案可以使用CSS创建，但大多数还是涉及某种形式的图片。幸运的是SVG可以很容易创建简单和更复杂的图案，还可以缩放，而且需要很少的http请求。上一篇文章中我们大概看了SVG<pattern>元素的基本内容和属性。通过一个示例展示了如何创建简单的图案。以及简单地介绍了几个<pattern>元素的属性。今天我们继续讨论几个pattern属性，其中一个可以通过引用另一个图案，xlink:href，帮我们创建更复杂的图案。首先快速回顾一下我上次讲过的内容。

一个常见的使用SVG绘制的图形是箭头。一行代码就可以创建一个，但是这样代码重复度很大。你也可以在<defs>和<symbol>中定义好再去重用，但是你每次应用的时候都需要对其移动或旋转。直接用一个<marker>元素的话会方便很多。前面几周的时候我讲过如何组织SVG代码，以及如何定义一个可重用的图形对象。可以翻一下w3cplus上SVG系列文章进行学习~今天我想要讨论一个特殊的元素，可以在一个地方定义，然后在另一个地方引用的——marker，通常用来创建箭头和一些polymarker。

我们在响应式网页设计的工作中经常用到SVG，这个过程通常包括设计阶段和开发阶段。设计阶段通常是由不懂编程的设计师们完成的。因为原生SVG作为一种图像格式和文档格式，在图形编辑器中创建SVG效果的每一步，都会直接影响生成的代码以及负责嵌入SVG代码、编写脚本或添加动画的开发者的工作。在我的日常工作中，我通常是既做设计师又做开发者，自己处理自己设计的内容，而SVG图像就是我的日常开发内容之一。

给SVG元素应用填充和描边有三种方法（戳这里学习SVG填充和描边的相关内容）。你可以使用纯色、图案或渐变。前面两种方法我们之前已经讲过了，现在我们来讨论第三种方法——渐变。SVG提供了两种渐变——线性、径向。我今天先讲线性渐变，下篇我们再看看径向渐变。