html - SVG 中 "background-repeat: round"的等价物？

Question

CSS 为 HTML 元素中的背景图像提供了一个方便的选项:如果我有一个 20 像素高的图案，但我的 HTML 元素的高度不能被 20 整除(例如 150 像素或 35 像素)，background-repeat: round 将平铺图案以使其看起来无缝，根据需要拉伸(stretch)/挤压平铺。

SVG 元素中的模式是否有等效的样式选项？例如:

<defs>
    <pattern id="myPattern" width="200" height="100" patternUnits="userSpaceOnUse">
        ... some pattern ...
    </pattern>
</defs>

<rect width="200" height="230" fill="#myPattern"/>

我想在我的矩形中有两个完整的图案重复(每个都拉伸(stretch)到 115 像素)，而不是两个完整的重复和部分三分之一。

编辑

solution by ccprog (below)对于这个特定的例子效果很好。但是，它需要模式来定义它将重复多少次。对于使用模式的元素具有不同高度(因此需要不同数量的模式重复)的情况，我仍然希望有一个通用的解决方案。

Answer 1

您可以为模式设置一个viewBox，并根据对象边界框定义模式单元:

<defs>
    <pattern id="myPattern" width="50%" height="50%"
             viewBox="0 0 200 100" preserveAspectRatio="none"
             patternUnits="objectBoundingBox">
        ... some pattern ...
    </pattern>
</defs>

<rect width="200" height="230" fill="#myPattern"/>

它并不完全等同于 CSS round，因为无论填充区域有多大，您都隐含地给出了宽度/高度属性的绝对重复次数。