使用viewBox内部CSS SVG内联代码创建重复的图像，如何防止重复

Question

我有HTML代码：

<div class="special-cell">TEST</div>

和CSS代码：

.special-cell {
background-color: gray;
text-align: center;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 100 100'><rect x='0%' y='0%' width='25%' height='33%' stroke='yellow' fill='yellow' stroke-width='1'/></svg>");
}

Fiddle代码在这里：https://jsfiddle.net/tomrhodes/7vtw3yhg/

我需要用形状填充div的背景，div的纵横比和大小可以是任意的，这就是为什么我在矩形中使用百分比。当然，重复不应该出现，只有一个矩形应该在div内部。如果我删除了viewBox，那么svg按预期工作——没有重复。但我也需要在div内部绘制多边形，多边形不允许以百分比指定点，这就是为什么我需要(根据支持百分比单位的SVG多边形点(使用viewBox，但如果我的div的宽度大于高度，它会创建重复图案。

如果使用viewBox，如何防止svg的重复？

Answer 1

要使SVG拉伸背景的整个宽度，请将preserveAspectRatio="none"添加到您的SVG:中

示例：https://jsfiddle.net/7vtw3yhg/17/

.special-cell {
background-color: gray;
text-align: center;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 100 100' preserveAspectRatio='none'><rect x='0%' y='0%' width='25%' height='33%' stroke='yellow' fill='yellow' stroke-width='1'/></svg>");
}

<div class="special-cell">TEST</div>

Answer 2

在https://jsfiddle.net/7vtw3yhg/8/

您需要使用以下样式来避免背景图像的重复

background-repeat: no-repeat;