在Web页面中有SVG图像的等效精灵吗？

问题描述

SVG图片不是位图，所以（除非我缺少一些东西）你不能像你可以与网页上使用的其他图片文件一样sprite（见）。

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).

但是有一个等效的机制来显示只有部分SVG图像作为CSS背景？

But is there an equivalent mechanism to display only part of an SVG image as a CSS background?

例如虚语法：

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

推荐答案

CSS sprite技术用于将SVG图片与背景位置分离，，但它确实得到一点混乱，如果你也开始使用background-size。如果您在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:

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

这篇关于在Web页面中有SVG图像的等效精灵吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！