网页设计元素之一——图案通常是由图片创建的。虽然有些图案可以由CSS创建，但大多数图片仍然涉及到某种形式的图片。幸运的是，SVG可以很容易地创建简单和更复杂的图案，也可以缩放，而且需要很少http请求。
我们之前大概看过SVG了<pattern>元素的基本内容和属性。如何通过一个例子创建一个简单的模式。并简要介绍了几个<pattern>元素的属性。
今天，我们将继续讨论一些pattern其中一个属性可以引用另一个图案，xlink:href，帮助我们创建更复杂的图案。首先，快速回顾我上次说的话。
使用图片作为图案
在最后一个例子中，我使用SVG图形来创建图案。我还提到图片可以用来创建图案。为了向您展示如何使用图像作为SVG图案，我在Pixelmator中创建了以下图片。
宽为50px，高为50px，你可以看到它是由两个绿色正方形组成的棋盘图案。以下是使用它作为图案的代码。
<svg width="660" height="220"> <defs> <pattern id="pattern-image" x="0" y="0" width="50" height="50" patternUnits="userSpaceOnUse"> <image xlink:href="images/pattern-50.png" x="0" y="0" width="50" height="50"></image> </pattern> </defs> <rect x="2" y="2" width="600" height="200" stroke="#630" stroke-width="5" fill="url(#pattern-image)" /> </svg>
我在这里用了一个<image>然后通过元素xlink:href属性引用图像。图像的路径是本地文件的路径。我把它改成了服务器端的路径，你也需要在引用时修改路径。
最后的SVG如下，在填充矩形之前，可以看到图像在水平方向和垂直方向重复。
现在我们来看看可以添加哪些属性。<pattern>这里点击官方文档的元素~
<pattern>元素的属性是什么？
上周我已经说过了<pattern>大约一半的属性，还剩下几个没说的。首先，我们已经谈到了以下五个。
-
x:图案在x轴向方向的起点 -
y:图案在y轴向方向的起点 -
width:x轴方向图案下次出现的位置 -
height:y轴方向图案下次出现的位置 -
patternUnits:定义图案的坐标系统，图案单元是否随引用其SVG对象缩放
因为我上次谈到了很多关于这些属性的内容，如果你不太了解这些属性，回去看看。接下来是上次没有提到的内容。
剩下的属性可能大家都很熟悉，因为我们在讨论重用SVG元素的时候就看到了。首先，每个图案都可以有一个viewBox，以及preserveAspectRatio属性。后者的值默认为xMidyMid。
两者的工作原理是一样的，关于viewBox和preserveAspectRatio如果你想了解更多，可以点击这里学习。(⊙v⊙)。
<patternContentUnits>属性
和patternUnits相似，patternContentUnits接受相同的两个值，userSpaceOnUse和objectBoundingBox。patternContentUnits属性定义了图案内容(注意图案的内容，即<pattern>坐标系统中包裹的内容)，而不是图案本身。
-
userSpaceOnUse:(默认值)不缩放 -
objectBoundingBox:可缩放
一般情况下，patternContentUnits还是等于userSpaceOnUse，因为我没有把它设置为其他值。这里有一个我把它放在这里patternContentUnits设置为objectBoundingBox的示例。
<svg width="660" height="220"> <defs> <pattern id="pattern-2" x="0" y="0" width="0.25" height="0.25" patternContentUnits="objectBoundingBox"> <circle cx=".125" cy=".125" r="0.125" stroke="none" fill="#393" /> </pattern> </defs> <rect x="10" y="10" width="600" height="200" stroke="#630" stroke-width="5px" fill="url(#pattern-2)" /> </svg>
代码看起来非常相似，但由于内容缩放，您需要减少坐标和圆半径小于1。我在这里用过0.125，也就是说，圆的width和height都变成了0.25个单位。
因为图案的width和height都是0.25，也就是25%，因此，确保下一个重复的图案与上一个图案紧密相邻。
结果如下。
显然，图案不是正圆，而是延长椭圆。因为图案中定义的圆允许与应用的矩形不同，通过半径定义x和y尺寸缩放(矩形宽度是高度的三倍)，所以圆会在x方向拉长。为了保持不变形，需要矩形x和y长度是一样的。
xlink:href和patternTransform属性
另一个你应该熟悉的属性，就是xlink:href。在SVG文档中，您可以使用它来引用另一个图案。
您还可以使用它patternTransform转换图案的属性。让我们来看看下面的应用程序xlink:href和patternTransform的实例吧。
我在这里创建了两个图案。第一个（id为pattern）是我们以前用过的绿色小圆。
第二个图案（id为pattern-transformed）通过xlink:href属性引用了第一个模式。它继承了第一个模式的所有内容。我也通过了patternTransform添加一个属性10度的旋转。
<svg width="660" height="480"> <defs> <pattern id="pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"> <circle cx="10" cy="10" r="10" stroke="none" fill="#393" /> </pattern> </defs> <defs> <pattern id="pattern-transformed" xlink:href="#pattern" patternTransform="rotate(10)"> </pattern> </defs> <rect x="10" y="10" width="600" height="200" stroke="#630" stroke-width="5px" fill="url(#pattern)" /> <rect x="10" y="250" width="600" height="200" stroke="#630" stroke-width="5px" fill="url(#pattern-transformed)" /> </svg>
我们将两种图案应用到矩形上，结果如下。
你可以看到，虽然我们只定义了第一个模式，但第二个模式继承了第一个模式的所有内容，并添加了一个变化。这是设置相同图案但有不同变化的好方法。
嵌套图案
你也可以通过在一个图案中引用另一个图案来嵌套。在这里，我创建了两个图案，一个放在里面，另一个放在里面。里面的图案是一系列重复的绿色方块，外面的图案是一系列重复的圆圈，带有深红色的图案，并填充第一个图案的内容。
<svg width="660" height="220"> <defs> <pattern id="pattern-inner" x="2" y="2" width="6" height="6" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="4" height="4" stroke="none" fill="#6a6" /> </pattern> <pattern id="pattern-outer" x="13" y="13" width="50" height="50" patternUnits="userSpaceOnUse"> <circle cx="22" cy="22" r="20" stroke="#900" stroke-width="4px" fill="url(#inner-pattern)" /> </pattern> </defs> <rect x="10" y="10" width="600" height="200" stroke="#630" fill="url(#outer-pattern)" /> </svg>
这是结果，你可以看到重复的圆形图案，填充在中间的方形图案。
这是另一个例子。外部图案没有描述。希望第二个嵌套图案的例子能给你一些创建嵌套图案的灵感。
总结
图案是另一种元素，你可以添加到你的SVG工具盒中，一个定义，然后继续引用。如果你在学习前有可重用的元素，图案应该很容易理解和使用。
另一个可重用的SVG元素大家都很熟悉，图案也很好玩。可以创建许多可爱的图案。
下次我将解释另一个元素，它与图案非常相似，可以用来填充或描述图形元素。也就是说gradient渐变啦~
