SVG patternUnits与patternContentUnits有什么区别

这两个属性都写在 上，但管的不是同一件事：patternUnits 决定图块的 x、y、width、height 用什么坐标系；patternContentUnits 决定图块内部 、 等内容用什么坐标系。实际开发中，先把“图块边界”和“内容绘制”分开，图案大小就不会随着目标元素意外变形。

先看两个属性各自控制什么

因此，修改 patternUnits 往往改变重复间距；修改 patternContentUnits 则改变图块内部的绘制基准。两个属性都改成 objectBoundingBox 时，内部坐标通常要写成 0 到 1 的比例，而不是把它当作像素值。

用坐标系解释 userSpaceOnUse 和 objectBoundingBox

userSpaceOnUse 使用引用图形所在的用户坐标系。例如图案单元宽度写成 24，通常就是 24 个用户单位。objectBoundingBox 则把引用元素的包围盒当成 0 到 1 的范围：0.5 代表宽度或高度的一半，百分比也相对这个包围盒解释。

这里有一个容易漏掉的默认值差异：patternUnits 默认是 objectBoundingBox，所以省略它时，width="20%" 是目标元素宽度的 20%；patternContentUnits 默认是 userSpaceOnUse，内部 仍按用户坐标 8 来算。

一组稳定的配置示例

下面的示例把图块固定为 24×24 用户单位，内部圆点也用同一套用户坐标。代码只展示静态结构，图案通过 fill 引用到矩形上。

如果把 patternUnits 改为 objectBoundingBox，同样的 width="24" 就不再表示 24 个用户单位，而会超出 0 到 1 的包围盒语义。固定像素纹理应明确写 userSpaceOnUse，不要依赖默认值。

viewBox 会改变判断方式

当 设置了 viewBox，浏览器会用 viewBox 和 preserveAspectRatio 把内部坐标映射到图块区域，此时 patternContentUnits 没有效果。也就是说，看到 viewBox 后，不要再试图用 patternContentUnits="objectBoundingBox" 调整内部图形比例，应检查 viewBox、图块宽高以及保持宽高比策略。

另外，width 或 height 为 0 会禁用绘制，负值属于错误；图案内容超出单元边界时，默认还可能被 overflow: hidden 裁剪。纹理缺边、只显示一角时，优先检查这两个边界，而不是先改 patternTransform。

按目标选择配置组合

排查时可以按“图块边界—内部坐标—viewBox—裁剪”的顺序记录四项值。这样能把“间距不对”和“内容位置不对”分开定位，也避免用换单位的方式掩盖真正的坐标系冲突。

常见问题

为什么 patternUnits 改了，圆点位置也像变了？

它改变了图块的坐标和尺寸，重复边界变化后，内部内容的可见区域也会随之变化。先确认内部坐标系，再单独调图块大小。

patternContentUnits 设置了 objectBoundingBox 却没有效果怎么办？

检查 pattern 是否同时设置了 viewBox。只要存在 viewBox，该属性就不参与内部坐标映射。

为什么省略 patternUnits 后纹理会随矩形大小变化？

因为它的默认值是 objectBoundingBox。如果要固定用户单位，显式写 patternUnits="userSpaceOnUse"。

记住一句话：patternUnits 管“瓷砖多大”，patternContentUnits 管“瓷砖里怎么画”；遇到 viewBox 时，内部内容改由视口映射。