网页中是否有相当于 SVG 图像精灵的功能？
SVG 图像不是位图，因此（除非我遗漏了某些内容）您不能像处理网页上使用的其他图像文件那样进行精灵绘制（请参阅 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);
}
SVG images aren’t bitmaps, so (unless I’m missing something) you can’t do spriting like you can with other images files used on web pages (see http://www.alistapart.com/articles/sprites).
But is there an equivalent mechanism to display only part of an SVG image as a CSS background?
E.g. imaginary syntax:
div.my-special-svg-div {
background-image: url(sprite-image.svg#one-shape-in-the-svg-file);
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
您可以使用“传统”CSS sprite 技术来分割具有背景位置的 SVG 图像，这是一个简单的示例，尽管如果您也开始使用背景大小，它确实会有点混乱。如果您在 SVG 图像上定义尺寸，可能会更容易：
You can use 'traditional' CSS sprite techniques to slice up SVG images with background position, here's a quick example, though it does get a little confusing if you also start using background-size. It's probably easier if you define a size on your SVG image:
我尝试过的一种方法不是 spriting，但实现了类似的目标，即使用数据 URI 将 url 编码的 SVG 图像直接包含在 CSS 文件中。
例如
（参见http://intertwingly.net/blog/2008/09/ 07/SVG-via-CSS）
因此，所有 SVG 图像最终都会出现在 CSS 文件中。 Gzipping 应该可以很好地将多个 SVG 文件压缩到一个 CSS 文件中。
据我所知，上面的 CSS 适用于 Opera 9.5+、IE 9 beta、Safari 5 和 Chrome 6。似乎不适用于 Firefox 3.6 或其他浏览器的早期版本。
One approach I’ve tried that isn’t spriting, but achieves similar aims, is to include url-encoded SVG images directly in the CSS file, using data URIs.
E.g.
(See http://intertwingly.net/blog/2008/09/07/SVG-via-CSS)
So, all your SVG images end up in the CSS file. Gzipping should squish multiple SVG files in one CSS file quite nicely.
As far as I can tell, the CSS above works in Opera 9.5+, IE 9 beta, Safari 5, and Chrome 6. Doesn’t seem to work in Firefox as of 3.6, or earlier versions of the other browsers.
您可以使用 SVG 堆栈：
http://simurai.com/post/20251013889/svg-stacks
You can use SVG Stacks:
http://simurai.com/post/20251013889/svg-stacks
SVG 在技术上甚至不受 W3C 标准的支持。如果没有插件，它甚至无法在 IE 中运行。也许你会发现一些不起眼的 Mozilla 插件可以让你做到这一点，但据我所知你的代码不会验证。
SVG isn't even technically supported by W3C standards. It won't even work in IE without a plugin. Maybe you'll find some obscure Mozilla plugin that lets you do that but as far as I know your code won't validate.