代码之家 › 专栏 › 技术社区 › Paul D. Waite

网页中的SVG图像是否有类似的spring?

css-sprites svg css

9

Paul D. Waite · 技术社区 · 14 年前

SVG图像不是位图,因此(除非Im缺少某些内容)不能像对网页上使用的其他图像文件那样进行喷水(请参见 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);
}

4 回复 | 直到 14 年前

1

9

robertc 14 年前

您可以使用“传统”CSS sprite技术来分割带有背景位置的SVG图像, here's a quick example

<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">

2

4

Paul D. Waite 14 年前

我尝试过的一种方法不是spriting,但达到了类似的目的,就是使用数据uri将url编码的SVG图像直接包含在CSS文件中。

例如。

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中都可以工作。在3.6版或其他浏览器的早期版本中,Firefox似乎不起作用。

3

1

joseaio 13 年前

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

4

-12

Yserbius 14 年前

W3C标准甚至不支持SVG。如果没有插件,它在IE中甚至都不起作用。也许你会发现一些模糊的Mozilla插件,让你这么做,但据我所知,你的代码不会验证。