解锁SVG模式的全部潜力：patternUnits和patternContentUnits

前端

2023-11-28 17:58:13

SVG模式的魅力

SVG（可缩放矢量图形）是一种基于XML的矢量图形格式，因其可扩展性、响应性和在网络上的轻量级特性而备受青睐。SVG模式为图形填充提供了强大的功能，允许您创建复杂的图案并将其应用于任何形状或路径。

patternUnits和patternContentUnits属性

模式的两个关键属性是patternUnits和patternContentUnits，它们共同控制着模式的尺寸和单位。

patternUnits ：指定模式自身的测量单位。有效值为"userSpaceOnUse"（以用户坐标为单位）和"objectBoundingBox"（以对象边界框为单位）。
patternContentUnits ：指定模式内容的测量单位。有效值为"userSpaceOnUse"（以用户坐标为单位）和"objectBoundingBox"（以对象边界框为单位）。

使用patternUnits和patternContentUnits

通过灵活使用patternUnits和patternContentUnits，您可以精确地控制模式的尺寸和单位。以下是一些常见的使用场景：

将模式应用于不同大小的对象： 使用"objectBoundingBox"作为patternUnits，模式将自动缩放以匹配对象的边界框。
在用户坐标中保持模式尺寸一致： 使用"userSpaceOnUse"作为patternUnits，模式将在不同大小的对象上保持相同的大小。
创建基于对象边界框的动态模式： 使用"objectBoundingBox"作为patternContentUnits，模式的内容将根据对象的边界框动态调整。
在用户坐标中创建固定大小的模式： 使用"userSpaceOnUse"作为patternContentUnits，模式的内容将始终保持固定的大小。

实例

为了更好地理解patternUnits和patternContentUnits的实际应用，让我们举一个简单的例子：

<svg>
  <defs>
    <pattern id="diagonal-stripes" patternUnits="objectBoundingBox" patternContentUnits="userSpaceOnUse" width="10" height="10">
      <path d="M 0 0 L 10 10" stroke="black" stroke-width="1" />
    </pattern>
  </defs>
  <rect x="0" y="0" width="100" height="100" fill="url(#diagonal-stripes)" />
</svg>