在网页中，SVG图像是否有类似于CSS Sprites的等效技术？

Question

SVG图像不是位图，所以（除非我漏掉了什么），你不能像其他用于网页的图像文件一样进行 spriting（请参见http://www.alistapart.com/articles/sprites）。

但是是否有一种等效机制来将 SVG 图像的一部分显示为 CSS 背景？

例如，想象一下语法：

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

- Paul D. Waite

Answer 1

您可以使用“传统”的CSS精灵技术通过背景位置来切割SVG图像，这里有一个快速示例，但如果您还开始使用background-size，则可能会有些混乱。如果您在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">

- robertc

---

这是非常有帮助的答案，他在实际的SVG图像文件中定义了大小。 - camdixon

Answer 2

我尝试过一种不使用精灵图的方法，但可以实现类似目的的做法是直接在CSS文件中包含url编码的SVG图像，使用data URIs。

例如：

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文件中。gzip压缩应该可以很好地压缩一个CSS文件中的多个SVG文件。

据我所知，上面的CSS适用于Opera 9.5+、IE 9 beta、Safari 5和Chrome 6。截至Firefox 3.6或其他浏览器的早期版本似乎不起作用。

- Paul D. Waite

---

请注意，它适用于Firefox 4.0 beta版：https://bugzilla.mozilla.org/show_bug.cgi?id=231179 - robertc

在那里的评论中，关于通过ID进行可能的精灵化的讨论非常有趣，来自https://bugzilla.mozilla.org/show_bug.cgi?id=231179#c38。 - Paul D. Waite

是的，在我尝试过之后，我认为这个想法值得提出来；顺便说一下，您可以使用“传统”的CSS精灵技术通过背景位置来切割SVG图像，但如果您还开始使用background-size，它可能会有点混乱。 - robertc

@robertc：啊，当然——我还没有用过太多的SVG，但你可以指定像素尺寸和X/Y坐标，对吧？所以我猜那应该适用于精灵图。如果您有任何相关经验，并想将其编写为答案，那么您应该会得到最值得赞扬的声音。 - Paul D. Waite

Answer 3

您可以使用SVG堆栈：

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

- joseaio

---

链接已经失效了 :( - mtness

Answer 4

SVG技术甚至在W3C标准中都没有得到技术支持。在IE浏览器中，如果没有插件的话，它甚至无法正常工作。也许你会找到一些鲜为人知的Mozilla插件可以让你实现这个功能，但据我所知，你的代码将无法通过验证。

- Yserbius

---

“SVG 甚至在技术上都得到了 W3C 标准的支持。” — 你是什么意思？它确实是一个 W3C 标准。 - Paul D. Waite

“如果没有插件，它甚至在IE中都无法工作。”——正如我所说，它似乎可以在IE 9测试版中工作而不需要插件。 - Paul D. Waite

“据我所知，你的代码无法验证” — 哪段代码？我上面放置的CSS可以很好地验证。 - Paul D. Waite

除此之外，回答很棒。 - Paul D. Waite