SVG patternUnits 属性介绍

SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的 XML 格式标记语言。其中的 patternUnits 属性用于定义 SVG 图案元素内部的坐标系。

patternUnits 属性的取值和含义

在 SVG 中，patternUnits 属性可以设置为以下四个值中的一个：

• userSpaceOnUse：SVG 元素本身的坐标系，即用户坐标系。

• objectBoundingBox：从 0 到 1 的相对坐标系统，以包含元素作为参照框盒。

• strokeWidth：相对于当前绘制的路径的笔触宽度，即线性渐变相对于当前路径的绘制对象确定。

• 负数：相对于当前绘制的路径的笔触宽度的负数。

patternUnits 属性的作用

SVG patternUnits 属性主要用于控制 SVG 图案的大小和坐标系。其中，使用 userSpaceOnUse 作为 patternUnits 值时，图案将会被绘制在 SVG 元素的用户坐标系中，并且其实际大小将与其设置的大小相匹配。而使用 objectBoundingBox 时，图案元素的大小将根据其所在元素的大小和位置自适应。strokeWidth 的作用是将图案元素缩放到路径宽度的大小，这对于创建复杂的纹理以及线性渐变特别有用。

代码示例

<svg width="100%" height="100%">
  <defs>
    <pattern id="checkerboard" patternUnits="userSpaceOnUse" width="10" height="10">
      <rect width="5" height="5" fill="white" x="0" y="0"></rect>
      <rect width="5" height="5" fill="white" x="5" y="5"></rect>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#checkerboard)"></rect>
</svg>

在上面的示例中，patternUnits 的取值是 userSpaceOnUse，checkerboard 长和宽为 10，内部由两个宽和高均为 5 的矩形组成。这样，当被 fill 属性引用时，checkerboard 将被放置在 SVG 元素的用户坐标系中，并被用作 SVG 元素的填充。