0
我试图了解如何包括一个SVG作为一个类，并通过CSS操纵悬停等。SVG + CSS - 如何在HTML中添加和缩放和颜色？
我从icomoon得到了以下svg示例。目的是避免页面中的多个http请求，并使用class将尽可能多的图标信息包含到CSS中。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512" viewBox="0 0 512 512"><g id="icomoon-ignore">
</g>
<path d="M192 232c0 13.2-10.8 24-24 24h-48c-13.2 0-24-10.8-24-24v-48c0-13.2 10.8-24 24-24h48c13.2 0 24 10.8 24 24v48z"></path>
<path d="M352 232c0 13.2-10.8 24-24 24h-48c-13.2 0-24-10.8-24-24v-48c0-13.2 10.8-24 24-24h48c13.2 0 24 10.8 24 24v48z"></path>
<path d="M192 392c0 13.2-10.8 24-24 24h-48c-13.2 0-24-10.8-24-24v-48c0-13.2 10.8-24 24-24h48c13.2 0 24 10.8 24 24v48z"></path>
<path d="M352 392c0 13.2-10.8 24-24 24h-48c-13.2 0-24-10.8-24-24v-48c0-13.2 10.8-24 24-24h48c13.2 0 24 10.8 24 24v48z"></path>
<path d="M456.041 80l55.959-55.958v-24.042h-24.041l-55.959 55.958-55.959-55.958h-24.041v24.042l55.959 55.958-55.959 55.958v24.042h24.041l55.959-55.958 55.959 55.958h24.041v-24.042z"></path>
<path d="M0 384h32v64h-32v-64z"></path>
<path d="M0 288h32v64h-32v-64z"></path>
<path d="M416 224h32v64h-32v-64z"></path>
<path d="M416 416h32v64h-32v-64z"></path>
<path d="M416 320h32v64h-32v-64z"></path>
<path d="M0 192h32v64h-32v-64z"></path>
<path d="M0 96h32v64h-32v-64z"></path>
<path d="M256 64h64v32h-64v-32z"></path>
<path d="M160 64h64v32h-64v-32z"></path>
<path d="M64 64h64v32h-64v-32z"></path>
<path d="M224 480h64v32h-64v-32z"></path>
<path d="M320 480h64v32h-64v-32z"></path>
<path d="M128 480h64v32h-64v-32z"></path>
<path d="M32 480h64v32h-64v-32z"></path>
</svg>
我知道从codepen的例子，如果我只是将它包括为一个html代码 - 它会工作。 （http://codepen.io/anon/pen/epvLgO）
但我想要做的是一样的东西
.icon {
<insert the contents of the svg file here>
}
.icon:hover {
fill: red ;
}
，然后在HTML这样做
<span class="icon"></span>
也 - 此图标 - 我怎么可以改变大小为各种媒体飞？
意味着
如果iphone，我要以不同方式设置图标大小...
.icon {
width: 32px;
heigh: 32px;
}
感谢..（这是看我怎么能减少HTTP调用总数 - 由使用SVG和CSS）
这可能会帮助你，虽然它不会减少HTTP请求：http://stackoverflow.com/questions/11978995/how-to-change-color-of-svg-image-using-css-jquery -svg-image-replacement/11978996 –
我想你已经把自己画在了这里的一个角落。您可以将SVG作为背景图像并将其作为数据URI嵌入到CSS中，但如果您这样做了，则无法更改悬停时的填充。如果你只是想让它在悬停时变得不透明，那将是可行的。 –
我想你可以在悬停时使用不同的红色图像。你会有两次图像数据，但这会使所需带宽增加一倍。 –