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

小提琴代码在这里：https://jsfiddle.net/tomrhodes/7vtw3yhg/

我需要用形状填充div的背景，div的纵横比和大小可以是任意的，这就是为什么我在rect中使用百分比的原因。当然，不应出现重复，div内只能有一个矩形。如果删除viewBox，则svg可以正常工作-不再重复。但是我也必须在div内绘制多边形，并且多边形不允许以百分比指定点，这就是为什么我需要（根据SVG polygon points with percentage units support）使用viewBox但它会创建如果我的div的宽度大于高度，则重复模式。

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

Answer 1

更新了ECMAScript 5 ISO-8601 format support的小提琴

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

background-repeat: no-repeat;

Answer 2

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

示例：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>

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

2 个答案: