SVG调整路径大小时如何保持填充纹理原始尺寸

要在调整SVG路径尺寸时让填充的纹理保持原始大小，核心是利用好<pattern>的两个关键属性，再根据你调整路径的方式做针对性处理，下面一步步来：

1. 基础设置：固定Pattern的坐标空间 #

你的代码里已经用了patternUnits="userSpaceOnUse"，这是正确的第一步！这个属性的作用是让pattern的 tile 尺寸（也就是你设置的width="10"和height="10"）基于SVG的全局用户坐标系统，而不是被填充元素的边界框。这样不管路径怎么变，只要全局坐标单位不变，tile的大小就固定。

不过还要给pattern内部的<image>明确加上固定宽高，避免它自适应缩放：

<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <pattern id="circles-1_4" patternUnits="userSpaceOnUse" width="10" height="10">
      <!-- 明确设置image的宽高和位置，和pattern tile尺寸一致 -->
      <image xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1..." 
             width="10" height="10" x="0" y="0" />
    </pattern>
  </defs>
</svg>

2. 不同场景的处理 #

场景A：直接修改路径的width/height属性 #

如果是直接调整路径的宽高（比如把100x100的矩形改成200x200），只要保持上面的设置，纹理就会保持原始大小，只是在更大的路径上重复更多次，不会跟着放大。

场景B：用transform: scale()缩放路径 #

如果是用transform缩放路径（比如transform="scale(2)"），问题就来了：transform会改变元素所在的用户坐标空间，导致userSpaceOnUse的pattern跟着缩放。这时候需要给<pattern>添加patternTransform属性，反向抵消缩放比例：

比如你的路径是：

<path d="M0 0 L100 0 L100 100 L0 100 Z" fill="url(#circles-1_4)" transform="scale(2)" />

那修改后的pattern应该是：

<pattern id="circles-1_4" patternUnits="userSpaceOnUse" width="10" height="10" patternTransform="scale(0.5)">
  <image xlink:href="..." width="10" height="10" x="0" y="0" />
</pattern>

这里的scale(0.5)就是把pattern反向缩放，抵消路径的scale(2)，让纹理回到原始大小。

额外小提示 #

如果你的SVG是基于SVG2标准（现代浏览器大多支持），可以把xlink:href简化成href，兼容性更好。

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