SVG pattern 怎样使用用户坐标指定重复图案大小

如果 SVG 图形会在不同尺寸的卡片、图表或图标中复用，pattern 默认的平铺大小可能会跟着目标图形一起缩放。想让每个重复单元保持明确的用户坐标尺寸，关键不是把 width 和 height 改成更大的百分比，而是把 patternUnits 设为 userSpaceOnUse。这样，x、y、width、height 按 SVG 当前用户坐标解释。

本文依据 MDN 的 参考说明，围绕一个常见问题展开：同一块纹理被填充到不同大小的图形后，怎样仍然让重复单元按当前 SVG 用户坐标保持一致。

先区分平铺单元尺寸与内容坐标

pattern 可以理解成一个会被重复绘制的小画布。它有两层坐标问题：第一层是“小画布”在目标图形上占多大，由 patternUnits 决定；第二层是小画布内部的圆、线、路径使用什么坐标，由 patternContentUnits 决定。把两者混写，往往会出现“单元尺寸改了，但内部图形比例也不对”的错觉。

判断问题时先问“变的是平铺单元，还是单元内部的图形”。这个分层能避免把所有异常都归结为 width 和 height。

用 userSpaceOnUse 固定重复图案大小

默认的 patternUnits="objectBoundingBox" 会把平铺单元的尺寸看成目标图形边界框的比例。例如 width="0.2" 表示目标边界宽度的 20%，目标图形变宽时，单元也会变宽。若纹理间距应该保持为 24 个用户坐标单位，就把尺寸坐标切换到 userSpaceOnUse：

这里的 width="24" 与 height="24" 是当前 SVG 用户坐标里的尺寸，所以矩形扩大时，网格单元不会因为目标边界变大而按比例拉伸。x 和 y 也使用同一套坐标，适合需要固定间距、对齐网格或保持纹理密度的场景。

把 pattern 放进 defs 并绑定到图形

工程上建议把可复用的 pattern 放进 defs，再通过 url(#id) 绑定到 fill 或 stroke。这样“图案定义”和“使用图案的目标图形”是两个独立对象，调整平铺尺寸时不用重复修改每个目标元素。

同一个 dash 同时服务填充和描边，但目标图形对它的可见区域不同。遇到“填充看起来正确、描边却错位”的情况，应先检查目标图形的边界、描边宽度和 patternTransform，不要立即把 patternUnits 改回比例坐标。

处理图案内部形状的坐标

切换 patternUnits 只解决平铺单元外框的尺寸。如果内部的 path、circle 或 rect 还需要独立控制，就要继续看 patternContentUnits。没有 viewBox 时，它默认使用 userSpaceOnUse；需要把内容按目标边界归一化时，可以显式设置 objectBoundingBox。

在这个例子里，外层单元是 24×24，圆心和半径也按用户坐标解释。若改用 objectBoundingBox，内部数值通常需要按 0 到 1 的边界比例来思考；数值范围和预期不匹配时，圆点可能变得过大、过小，甚至落到可视区域之外。

为什么加了 viewBox 后看起来又变了

viewBox 为 pattern 内容建立一个内部视口。当 pattern 同时存在 viewBox 时，patternContentUnits 对内容坐标不再起原本的作用，内容会按照 viewBox 与外部尺寸之间的映射来呈现。也就是说，排查时不能只看 patternContentUnits，还要确认是否在 pattern 上写了 viewBox。

可以按下面的顺序收敛问题：

1. 先确认 patternUnits 是否为 userSpaceOnUse，并确认 width、height 使用的是用户坐标数值。
2. 再确认 pattern 内部形状的坐标范围，判断它是在用户坐标还是边界框比例中描述。
3. 如果存在 viewBox，把它作为内容坐标映射的主要入口检查。
4. 最后检查 patternTransform 是否额外改变了旋转、缩放或平移。

这种排查方式的好处是把“单元大小”和“单元内部内容”分开。前者决定重复间距，后者决定每个重复单元里图形如何落位；两层同时变化时，视觉上才会像是 pattern 完全失控。

常见问题

patternUnits 写成 userSpaceOnUse 后，width 和 height 应该写百分比吗？

通常不需要。它们会按当前 SVG 用户坐标解释，适合直接写 24、32 等固定长度；是否使用百分比要结合 SVG 长度语义和具体布局，不要把比例值当成固定像素间距。

patternUnits 和 patternContentUnits 可以使用不同坐标系吗？

可以。一个控制平铺单元的外部几何尺寸，一个控制内部形状坐标。常见组合就是外框使用 userSpaceOnUse，内部内容再根据是否需要随目标边界缩放来选择。

为什么设置了 patternContentUnits 但没有效果？

首先检查 pattern 是否存在 viewBox。MDN 的属性说明指出，指定 viewBox 时，patternContentUnits 不再影响内容坐标；此时应该直接调整 viewBox 与图案内部形状的坐标关系。

patternTransform 会改变平铺单元的宽高吗？

它会对 pattern 坐标系施加附加变换，因此旋转或缩放可能改变最终视觉间距。若目标是固定的轴对齐网格，先不要叠加变换，等基础坐标关系明确后再加入。

把重复图案固定在用户坐标上，核心只有一句：给 pattern 设置 patternUnits="userSpaceOnUse"，再用用户坐标写出平铺尺寸。之后再独立处理内部内容坐标、viewBox 和变换，就能把“外框大小”和“内部形状”两个问题拆开。