SVG中是否有与CSS的background-repeat: round等效的实现方案？

嘿，这个问题问到点子上了！相信很多用过CSS背景图的同学，都会怀念background-repeat: round那种自动拉伸图案、无缝铺满容器的便利，但SVG的<pattern>确实没有直接对应的原生属性，得咱们手动来实现类似效果。

先回忆下CSS里round的逻辑：当容器尺寸不是图案尺寸的整数倍时，它会自动调整图案的大小，让图案刚好完整重复整数次，填满整个容器，不会出现截断的部分。比如你例子里230px高的矩形，搭配100px高的图案，它会把每个图案拉伸到115px，刚好重复2次铺满。

针对固定尺寸元素的快速方案（对应你给出的示例） #

如果已经知道元素的具体尺寸，像你例子里的230px高矩形，其实可以直接调整<pattern>的参数：

<svg width="200" height="230">
  <defs>
    <!-- 把pattern的height设为115，刚好是230/2 -->
    <pattern id="myPattern" width="200" height="115" patternUnits="userSpaceOnUse">
      <!-- 你的图案内容 -->
      <rect width="200" height="100" fill="#eee" stroke="#333"/>
      <text x="100" y="50" text-anchor="middle" dy=".3em">Pattern</text>
    </pattern>
  </defs>
  <rect width="200" height="230" fill="url(#myPattern)"/>
</svg>

不过这种方法局限性很大，换个元素尺寸就得重新改参数，显然不是你想要的通用方案。

通用解决方案：用JavaScript动态适配 #

要适配任意尺寸的元素，最靠谱的方式是用JS动态计算尺寸和缩放比例，模拟round的逻辑：

1. 先获取目标元素和图案的原始尺寸
2. 计算需要完整重复的次数（取最接近容器尺寸/图案尺寸的整数）
3. 算出每个图案需要缩放的比例，让总尺寸刚好填满容器
4. 把缩放比例应用到图案上

下面是完整的示例代码：

<svg width="200" height="230">
  <defs>
    <pattern id="myPattern" width="200" height="100" patternUnits="userSpaceOnUse">
      <!-- 示例图案内容 -->
      <rect width="200" height="100" fill="#eee" stroke="#333"/>
      <text x="100" y="50" text-anchor="middle" dy=".3em">Pattern</text>
    </pattern>
  </defs>
  <rect id="targetRect" width="200" height="230" fill="url(#myPattern)"/>
</svg>

<script>
// 获取目标元素和图案
const rect = document.getElementById('targetRect');
const pattern = document.getElementById('myPattern');

// 获取元素和图案的高度（如果需要适配宽度，逻辑一样）
const rectHeight = parseFloat(rect.getAttribute('height'));
const patternHeight = parseFloat(pattern.getAttribute('height'));

// 计算重复次数：取最接近容器高度/图案高度的整数
const repeatCount = Math.round(rectHeight / patternHeight);
// 计算缩放比例：容器高度 / (重复次数 * 原始图案高度)
const scaleY = rectHeight / (repeatCount * patternHeight);

// 把缩放应用到图案上（如果需要适配宽度，加上scaleX）
pattern.setAttribute('patternTransform', `scale(1, ${scaleY})`);
</script>

这段代码不管你的矩形高度是150px、35px还是其他任意值，都能自动计算出合适的缩放比例，让图案完整重复整数次，无缝铺满容器，效果和CSS的background-repeat: round几乎一致。

纯SVG方案的局限性 #

如果你不想用JS，纯SVG里很难实现完全通用的效果，因为SVG的<pattern>是静态定义的，没有原生的动态计算能力。虽然可以用SMIL动画做一些简单适配，但灵活性远不如JS，所以更推荐上面的JS方案。

内容的提问来源于stack exchange，提问作者Tony the Pony