转载

SVG图案:通过图片、属性和嵌套构建更复杂的图案

网页设计元素之一——图案,通常是使用图片创建的。虽然一些图案可以使用CSS创建,但大多数还是涉及某种形式的图片。幸运的是SVG可以很容易创建简单和更复杂的图案, 还可以缩放 ,而且需要很少的 http 请求。

上一篇文章中我们大概看了SVG <pattern> 元素的基本内容和属性。通过一个示例展示了如何创建简单的图案。以及简单地介绍了几个 <pattern> 元素的属性。

今天我们继续讨论几个 pattern 属性,其中一个可以通过引用另一个图案, xlink:href ,帮我们创建更复杂的图案。首先快速回顾一下我上次讲过的内容。

使用一个图片作为图案

上次所有的实例中,我都是使用SVG图形来创建图案。我也提到了可以使用图片来创建图案。为了向你展示如何使用一个图像作为SVG图案,我在Pixelmator中创建了如下的图。

SVG图案:通过图片、属性和嵌套构建更复杂的图案

宽为 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如下,你可以看到图像在水平方向和垂直方向都有重复,直到填充完矩形。

SVG图案:通过图片、属性和嵌套构建更复杂的图案

现在我们来看看都有哪些属性可以添加给 <pattern> 元素,官方文档点 这里 ~

<pattern> 元素都有哪些属性?

我上周已经讲了 <pattern> 大概一半的属性,还剩几个没讲的。首先下面这五个我们已经讲过的。

  • x :图案在 x 轴方向的起点
  • y :图案在 y 轴方向的起点
  • width : x 轴方向图案下一次出现的位置
  • height : y 轴方向图案下一次出现的位置
  • patternUnits :定义图案的坐标系统,图案的单位是否随着引用它的SVG对象进行缩放

因为我上次关于这几个属性已经讲了很多内容啦,如果你还不太了解这些属性的话,赶紧回去翻翻。接下来讲得就是上次没有讲到的内容啦。

余下的几个属性可能大家也比较熟悉,因为我们在前面讨论 重用SVG元素 的时候已经见过它们了。首先每个图案可以有一个 viewBox ,以及 preserveAspectRatio 属性。后者的值默认为 xMidyMid

两个的工作原理是一样的,关于 viewBoxpreserveAspectRatio 可以点击这里学习,如果你想了解更多内容的话(⊙v⊙)。

<patternContentUnits> 属性

patternUnits 相似, patternContentUnits 接受相同的两个值, userSpaceOnUseobjectBoundingBoxpatternContentUnits 属性定义了图案内容(注意是图案的内容,即 <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 ,也就是说圆的 widthheight 都变成了 0.25 个单位。

因为图案的 widthheight 都是 0.25 ,也就是 25% ,所以可以确保图案的下一个重复的图案是和上一个图案紧紧相邻的。

结果如下。

很明显现在图案不是正圆了,而是拉长了的椭圆。因为图案中定义的圆,通过一个半径定义,允许随着应用的矩形不同的 xy 尺寸进行 缩放 (而矩形的宽度是高度的三倍),所以圆会在x方向上被拉长。要保持不变形,需要矩形的 xy 的长度是一样的。

xlink:hrefpatternTransform 属性

另一个你应该不陌生的属性,就是 xlink:href 。你可以使用它来在SVG文档中引用另一个图案。

你还可以使用 patternTransform 属性来将图案进行 变换 。我们来看看下面这个应用了 xlink:hrefpatternTransform 的实例吧。

这里我创建了两个图案。第一个( idpattern )是我们前面用过的绿色小圆。

第二个图案( idpattern-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 渐变啦~

本文根据 @Steven Bradley 的《 SVG Patterns — Build More Complex Patterns With Images, Attributes, And Nesting 》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处: http://vanseodesign.com/web-design/svg-pattern-attributes/ 。

SVG图案:通过图片、属性和嵌套构建更复杂的图案

彦子

在校学生,本科计算机专业。逗比一枚,热爱前端热爱生活,喜欢CSS喜欢JavaScript喜欢SVG,爱玩PS玩AI玩啊逗比的软件。努力向上,厚积薄发。

正文到此结束
Loading...