SVG中的无缩放重复背景图片

Question

我有一个问题，希望有人可以帮我解答。我正在寻找与CSS属性“background-repeat”在SVG图像中等效的内容。是否有任何技巧可以将光栅图像重复作为填充来实现？这是因为我正在设计一个网站，并希望尝试使用SVG图形使其可扩展。因此，当用户缩放时，一切都保持完美清晰。但是，我也需要“颗粒状”的光栅纹理。现在，如果我在Illustrator中将光栅图像应用为纹理并将其保存为SVG，则纹理会随着文件一起缩放，微妙的颗粒感变成了丑陋的像素块。现在，我正在寻找一种重复图像而不是在缩放时对其进行缩放的可能性。有谁知道如何实现这个技巧吗？

我想到的另一种可能性是从SVG中取出光栅图像，并通过CSS将其应用为背景。不幸的是，似乎没有办法通过CSS或JavaScript防止背景图像缩放。这是非常合理的，因为任何这样做的内容元素都会遭受无法访问的地狱。

- Pascal

Answer 1

看看SVG Patterns。我认为您可以使用patternUnits和patternContentUnits来实现与缩放无关的行为，但尚未验证。

- Phrogz

Answer 2

我通过使用以em为单位设置的background-size值而不是百分比，成功地使其工作。我将SVG创建为较大的尺寸（30px x 90px），并使用em将其缩小到目标尺寸。

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可以使用光栅版本作为备选方案。

- atparkweb