代码之家 › 专栏 › 技术社区 › TomR

使用cssvg内联代码中的viewBox创建重复图片,如何防止重复?

svg css

TomR · 技术社区 · 6 年前

我有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 形状、纵横比和尺寸 分区 可能是任意的,这就是为什么我在rect中使用百分比。当然,重复不应该出现,只有一个矩形应该在里面 分区 . 如果我移除 viewBox ,然后 svg 正在按预期工作-没有重复。但我必须在里面画多边形 分区 另外,多边形不允许在百分比中指定点,这就是为什么需要我(根据 SVG polygon points with percentage units support )使用 视图框 但如果 分区 大于高度。

如果使用viewBox,如何防止svg重复?

2 回复 | 直到 6 年前

Paul LeBeau 6 年前

要使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>

Charu Maheshwari 6 年前

更新的小提琴 https://jsfiddle.net/7vtw3yhg/8/

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

background-repeat: no-repeat;

推荐文章

Aaron · 使用feTurbulence SVG标记模拟Musgrave纹理动画

1 年前

Michael Lynch · 如何使用包来构建导入SVG的React组件库?

1 年前

Chris Barr · 为什么带有<defs>的SVG在转换为<symbol>时会丢失渐变?

1 年前

HTML · 如何使用css使任何SVG图像灰度化?

2 年前

JohnB · 将<svg>资源放在</body>之后合法吗?

2 年前

Hashim Aziz · 为什么使用SVG Core设置FontAwesome在默认情况下会禁用这些选项?

2 年前

Sougata Mukherjee · 如何同时悬停svg和文本

2 年前

Basj · 即使距离为3像素,也能检测到SVG线上的点击

2 年前

jana · 在带有javascript的svg中的锚点中插入rect元素不起作用

2 年前

Developer · 如何在SVG图例中将文本悬停在rect或legendcells上

2 年前