Css SVG中与缩放无关的重复背景图像

我有个问题，希望有人能帮我。我搜索的是SVG图像中CSS属性

background repeat

的等价物。是否有任何技巧可以实现重复光栅图像作为填充？这一点是，我正在设计一个网站，并希望试验SVG图形，使其具有可伸缩性。因此，当用户缩放时，一切都保持完美的清晰度。但是，我还需要“粒状”光栅纹理。现在，如果我在Illustrator中将光栅图像作为纹理应用，并将其另存为SVG，纹理会随着文件一起缩放，细微的纹理会变成难看的像素块。现在，我正在寻找一种可能性，重复图像，而不是缩放它。有没有人知道如何实现这一点

---

我考虑的另一种可能性是将光栅图像从SVG中取出，并通过CSS将其作为背景应用。不幸的是，似乎没有办法阻止背景图像在CSS或JavaScript中缩放。这很有道理，因为任何对内容元素这样做的人肯定会下无障碍地狱。

请参阅。我相信您可以使用

patternUnits

和

patternContentUnits

来实现与缩放无关的行为，但尚未对此进行验证。

我能够通过使用ems中设置的背景大小值而不是百分比来实现这一点。我以更大的尺寸（30px 90px）创建了SVG，并使用ems将其缩小到我的目标尺寸

body {
  font-size: 15px;
  background: #fff url(stripe_pattern.svg) repeat-x left top;
  -webkit-background-size: 0.5em, 0.5em;
  -moz-background-size: 0.5em, 0.5em;
  -o-background-size: 0.5em, 0.5em;
  background-size: 0.5em, 0.5em;
}

这至少适用于现代浏览器。IE可以使用光栅版本