Question

CSS为HTML元素中的背景图像提供了一个方便的选项：如果我的图案高度为20像素，但我的HTML元素的高度不能被20整除（例如150px或35px），{{{ 1}}将平铺图案以使其看起来无缝，根据需要切割/挤压图块。

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

id           type                   value
----------   --------------------   -------
135719887    TOTAL_DUE_AMOUNT       832.15
135719887    AUTO_PAY               false
135719887    CREDIT_CARD_EXPIRED    false
135719887    HAS_SEDONA_CHARGES     true

我想在我的矩形中重复两次模式（每个拉伸到115px），而不是两次完整重复和第三次重复。

修改

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，因为无论填充区域有多大，您都会隐含地给出宽度/高度属性的绝对重复次数。

相当于SVG中的“background-repeat：round”？

1 个答案: