SVG patternContentUnits 属性

SVG（可缩放向量图形）是一种基于XML的图形格式，可用于在Web上呈现图形。SVG PatternContentUnits 属性定义了填充模式（pattern）的单元格大小。

属性值

• userSpaceOnUse 支持自定义的单元大小，无论哪个patternTransform 被应用，其大小不会改变。
• objectBoundingBox 使用当前对象的边界框作为视口，将其坐标系调整为百分比。此方法表示在该对象内部绘制的图像只能填充到该对象的边界框内。

语法

<pattern patternContentUnits="userSpaceOnUse|objectBoundingBox" ...>

示例

<svg width="200" height="200">
  <defs>
    <pattern id="pattern" x="0" y="0" width="5" height="5" patternContentUnits="objectBoundingBox">
      <rect x="0" y="0" width="100%" height="100%" fill="red" />
      <rect x="0" y="0" width="50%" height="50%" fill="blue" />
    </pattern>
  </defs>

  <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern)" />
</svg>

在上述示例中，我们定义了一个名为pattern 的填充模式，其大小指定为5x5，并且patternContentUnits 属性设置为objectBoundingBox。因此绘制到pattern 中的所有形状都将按objectBoundingBox 中所定义的大小进行填充。

结论

在SVG中，patternContentUnits 属性定义了填充模式的形状大小。如果您需要创建一个填充模式，可以通过将属性设置为userSpaceOnUse 或 objectBoundingBox 来指定填充模式的大小。