Question

SVG图像不是位图，所以（除非我遗漏了某些东西）你不能像在网页上使用的其他图像文件那样做精灵（参见http://www.alistapart.com/articles/sprites）。

但是，是否存在仅显示SVG图像的一部分作为CSS背景的等效机制？

E.g。想象的语法：

div.my-special-svg-div {
    background-image: url(sprite-image.svg#one-shape-in-the-svg-file);
}

Answer 1

您可以使用'传统'CSS精灵技术来切割背景位置为here's a quick example的SVG图像，但如果您也开始使用背景大小，它确实会有点混乱。如果在SVG图像上定义大小，可能会更容易：

<svg version="1.1" 
     xmlns:svg="http://www.w3.org/2000/svg"
     xmlns="http://www.w3.org/2000/svg"
     width="320"
     height="240"
     viewBox="0 0 320 240">

Answer 2

我尝试过的一种不是精灵，但实现类似目标的方法是使用数据URI将URL编码的SVG图像直接包含在CSS文件中。

E.g。

background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Crect%20fill%3D%22%23CCD%22%20%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%0A%20%20%3Crect%20fill%3D%22%23039%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20rx%3D%221em%22%2F%3E%0A%3C%2Fsvg%3E);

（见http://intertwingly.net/blog/2008/09/07/SVG-via-CSS）

因此，所有SVG图像最终都在CSS文件中。 Gzipping应该很好地压缩一个CSS文件中的多个SVG文件。

据我所知，上面的CSS可以在Opera 9.5 +，IE 9 beta，Safari 5和Chrome 6中使用。在3.6或其他浏览器的早期版本中似乎不适用于Firefox。

Answer 3

您可以使用SVG Stacks：

http://simurai.com/post/20251013889/svg-stacks

Answer 4

W3C标准甚至没有技术支持SVG。如果没有插件，它甚至不能在IE中运行。也许你会找到一些不起眼的Mozilla插件，可以让你这样做但据我所知你的代码不会验证。

是否有相当于网页中SVG图像的精灵？

4 个答案: