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

我有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>");
}

。特殊单元格{
背景颜色：灰色；
文本对齐：居中；
背景图像：url（“数据：image/svg+xml；utf8，”）；
}

Fiddle代码如下：

我需要用形状填充

div

的背景，我的

div

的纵横比和大小可以是任意的，这就是为什么我在rect中使用百分比。当然，不应出现重复，只有一个矩形应位于

div

内。如果删除

viewBox

，则

svg

将按预期工作-无重复。但是我也需要在

div

内绘制多边形，并且多边形不允许以百分比指定点，这就是为什么我需要（根据）使用

viewBox

但如果我的

div

的宽度大于高度，它会创建重复图案

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

在

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

background-repeat: no-repeat;

更新小提琴

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

background-repeat: no-repeat;

---

要使SVG扩展背景的整个宽度，请向SVG添加

preserveAspectRatio=“none”

：

例如：

。特殊单元格{
背景颜色：灰色；
文本对齐：居中；
背景图像：url（“数据：image/svg+xml；utf8，”）；
}

---

TEST

要使SVG扩展整个背景宽度，请将

preserveSpectratio=“none”

添加到SVG：

例如：

。特殊单元格{
背景颜色：灰色；
文本对齐：居中；
背景图像：url（“数据：image/svg+xml；utf8，”）；
}

---

TEST

它确实消除了重复，但矩形（在svg中定义）占据水平区域的25%会更好，但显然它现在占据的区域要小得多..在“”处更新了fiddle。使用背景尺寸：封面。谢谢，但现在黄色矩形有100%的高度，但它应该只有33%的高度，并且位于左右摄像机（25%*33%区域）。我觉得应该在svg图片中特别更改一些内容。它确实消除了重复，但最好是矩形（在svg中定义）占据水平区域的25%，但显然它现在占据的区域要小得多..在“”处更新了fiddle。使用背景尺寸：封面。谢谢，但现在黄色矩形有100%的高度，但它应该只有33%的高度，并且位于左右摄像机（25%*33%区域）。我觉得svg图片内部应该有一些特别的改变。这正是我试图阻止的-svg图片在左上角包含一个黄色矩形，但是现在有很多黄色矩形，不需要重复。我正试图通过删除viewBox来获得这样的结果：一个矩形占据水平灰度区域的25%*33%。不幸的是，我应该以某种方式容纳viewBox，因为我需要添加多边形，它们不支持百分比值，我想创建相当大的代码。如果那不是你想要的，那么我不明白你想要什么。也许可以在你的问题中添加一个模型图像，这样我们就可以看到你想要什么了。好吧，我现在在mobile上查看了，mobile Firefox显示了多个矩形，但是mobile Chrome显示的和预期的完全一样——一个矩形的位置和大小正确。我猜，桌面浏览器的表现也很相似，我主要使用的是Firefox，很明显它有问题。如果它在Firefox中呈现错误，我鼓励你这样做。很高兴它能按照你的意愿工作。使用100x100的

视图框

，您的坐标已经是百分比。因此设置

x=“59”

相当于将其设置为59%。这正是我试图阻止的-svg图片在左上角包含一个黄色矩形，但现在有很多黄色矩形，不需要重复。我正试图通过删除viewBox来获得这样的结果：一个矩形占据水平灰度区域的25%*33%。不幸的是，我应该以某种方式容纳viewBox，因为我需要添加多边形，它们不支持百分比值，我想创建相当大的代码。如果那不是你想要的，那么我不明白你想要什么。也许可以在你的问题中添加一个模型图像，这样我们就可以看到你想要什么了。好吧，我现在在mobile上查看了，mobile Firefox显示了多个矩形，但是mobile Chrome显示的和预期的完全一样——一个矩形的位置和大小正确。我猜，桌面浏览器的表现也很相似，我主要使用的是Firefox，很明显它有问题。如果它在Firefox中呈现错误，我鼓励你这样做。很高兴它能按照你的意愿工作。使用100x100的

视图框

，您的坐标已经是百分比。因此设置

x=“59”

相当于将其设置为59%。