Question

我有一个问题，希望有人可以帮助我。我要搜索的是SVG图像中的CSS属性background-repeat。是否有任何黑客可以将重复的光栅图像作为填充？关键在于我正在设计一个网站，并希望尝试SVG图形以使其可扩展。因此，当用户放大时，一切都保持完全清晰。但是，我还需要“颗粒状”光栅纹理。现在，如果我在Illustrator中将光栅图像应用为纹理并将其另存为SVG，则纹理会随文件一起变焦，细微的纹理会变成难看的像素块。现在我正在寻找重复图像的可能性，而不是在缩放时缩放图像。有没有人知道要实现这个目标？

我想到的另一种可能性是将光栅图像从SVG中取出并通过CSS将其作为背景应用。不幸的是，似乎无法阻止背景图像通过CSS或JavaScript进行缩放。这是完全合理的，因为任何在内容元素上这样做的人肯定会去访问地狱。

Answer 1

见SVG Patterns。我相信您可以使用patternUnits和patternContentUnits来实现与缩放无关的行为，但尚未对此进行验证。

Answer 2

我能够通过使用在ems中设置的背景大小值而不是百分比来完成这项工作。我以更大的尺寸（30px x 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可以回退到光栅版本。

SVG中与尺度无关的重复背景图像

2 个答案: