如何阻止SVG图案随填充元素缩放？是否存在纯SVG实现方案？

问题原因 #

你定义的pattern使用patternUnits="userSpaceOnUse"是相对于所在SVG的内部用户坐标系的，而你给每个填充用的SVG都加了viewBox属性，SVG会自动缩放内部坐标体系适配容器的实际显示尺寸，所以容器尺寸变化时，图案会跟着坐标体系一起缩放，不符合你的预期。

纯SVG+CSS解决方案 #

不需要用到JavaScript，只需要修改填充用SVG的结构和少量CSS即可：

1. 调整SVG结构 #

删除所有用来承载图案填充的SVG的viewBox属性，内部rect的宽高统一设为100%，让SVG内部坐标和实际显示像素一一对应：

<div class="wrapper">
  <div class="thing a">
    <svg>
      <rect width="100%" height="100%" fill="url(#pattern)" />
    </svg>
  </div>
  <div class="thing b">
    <svg>
      <rect width="100%" height="100%" fill="url(#pattern)" />
    </svg>
  </div>
  <div class="thing c">
    <svg>
      <rect width="100%" height="100%" fill="url(#pattern)" />
    </svg>
  </div>
  <div class="thing d">
    <svg>
      <rect width="100%" height="100%" fill="url(#pattern)" />
    </svg>
  </div>
</div>

2. 微调CSS #

给.thing svg新增高度属性，保证SVG填满父容器：

.thing svg {
  display: block;
  width: 100%;
  height: 100%;
}

修改完成后，你定义的4x4尺寸的斜线图案会在所有尺寸的容器中保持原始尺寸平铺，不会随容器缩放。

如果你的使用场景必须保留SVG的viewBox属性绘制其他矢量元素，可以给pattern添加patternTransform属性抵消viewBox的缩放比例，这种方案需要根据每个SVG的viewBox参数和实际显示尺寸计算缩放系数，通用性低于上述方案。

内容的提问来源于stack exchange，提问作者Nachtfunke