SVG ＜pattern＞标签的用法和应用场景

henry+

于 2024-06-20 17:21:45 发布

阅读量557

点赞数 13

分类专栏： web 文章标签：前端

本文链接：https://blog.csdn.net/henry47/article/details/139838444

版权

web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

通过使用 <pattern> 标签，可以在 SVG 图像内部定义可重复使用的任意图案。这些图案可以通过 fill 属性或 stroke 属性进行引用。

使用场景

例如我们要在 <svg> 中绘制大量的圆点点，可以通过重复使用 <circle> 标签来实现。

在这里插入图片描述

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="10" cy="10" r="2" fill="black" />
  <circle cx="30" cy="10" r="2" fill="black" />
  <circle cx="50" cy="10" r="2" fill="black" />
  <circle cx="70" cy="10" r="2" fill="black" />
  <circle cx="90" cy="10" r="2" fill="black" />

  <circle cx="10" cy="30" r="2" fill="black" />
  <circle cx="30" cy="30" r="2" fill="black" />
  <circle cx="50" cy="30" r="2" fill="black" />
  <circle cx="70" cy="30" r="2" fill="black" />
  <circle cx="90" cy="30" r="2" fill="black" />

  <circle cx="10" cy="50" r="2" fill="black" />
  <circle cx="30" cy="50" r="2" fill="black" />
  <circle cx="50" cy="50" r="2" fill="black" />
  <circle cx="70" cy="50" r="2" fill="black" />
  <circle cx="90" cy="50" r="2" fill="black" />

  <circle cx="10" cy="70" r="2" fill="black" />
  <circle cx="30" cy="70" r="2" fill="black" />
  <circle cx="50" cy="70" r="2" fill="black" />
  <circle cx="70" cy="70" r="2" fill="black" />
  <circle cx="90" cy="70" r="2" fill="black" />

  <circle cx="10" cy="90" r="2" fill="black" />
  <circle cx="30" cy="90" r="2" fill="black" />
  <circle cx="50" cy="90" r="2" fill="black" />
  <circle cx="70" cy="90" r="2" fill="black" />
  <circle cx="90" cy="90" r="2" fill="black" />
</svg>

这种方法不好的地方在于，需要为每个点都创建一个 <circle> 标签，它们除了坐标不一致之外，其它属性都是相同的，大量代码都是冗余的。

这种情况正好就是 <pattern> 标签能够大显身手的地方。

使用方法

使用 <pattern> 标签的基本步骤如下：

在 <defs> 标签内定义 <pattern>。
通过元素的 stroke 或 fill 属性引用定义好的图案。

定义 <pattern> 最初看起来可能有些复杂，但实际上它仅仅是绘制一些形状或路径而已。你可以把它想象成一个可从外部重复引用的 <svg> 标签。

<pattern> 可使用的一些属性

viewBox: 用数值列表指定图案视口边界，默认为 none。
x: 以长度或百分比指定图案的X坐标，默认为 0。
width: 指定图案宽度，默认为 0。
height: 指定图案高度，默认为 0。
href: 要重用现有图案时，指定 id，默认为 none。
patternContentUnits: 指定图案坐标系统，可选值为 userSpaceOnUse（SVG坐标）或objectBoundingBox（相对于形状），默认为 userSpaceOnUse。若设置了 viewBox，此属性无效。
patternTransform: 如需对图案应用变换（如旋转 rotate(45) ），在此指定，默认为 none。
patternUnits: 指定 x、y、width、height 值所使用的坐标单位，可选 userSpaceOnUse 或 objectBoundingBox，默认为 objectBoundingBox。
preserveAspectRatio: 定义当图案应用于具有不同长宽比的图形时的处理方式，可选值包括 none、xMinYMin、xMidYMin、xMaxYMin、xMinYMid、xMidYMid、xMaxYMid、xMinYMax、xMidYMax、xMaxYMax 等，并可附加 meet（保持比例填充）或 slice（可截断），默认为 xMidYMid meet。

我们再以上面的点状图案为例，使用 <pattern> 标签重新实现一次，代码如下：

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="dotPattern" width="20" height="20" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="2" fill="black" />
    </pattern>
  </defs>
  <rect width="100" height="100" fill="url(#dotPattern)" />
</svg>