网页设计元素之一——图案，通常是使用图片创建的。虽然一些图案可以使用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渐变啦~
网友评论文明上网理性发言 已有0人参与
发表评论: