SVG + CSS-如何包含在HTML中以及比例和颜色？

Question

我试图了解如何将SVG包含为类，并通过CSS进行悬浮等操作。

我从icomoon获得了以下svg示例。 目的是避免页面中出现许多http请求，并在使用类的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;
}

谢谢..（这是看看如何减少SV调用和CSS的http调用总数）

Answer 1

您可以将SVG代码放入CSS中，如下所示：

.icon {
  display:inline-block;
  width: 100px;
  height: 100px;
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 512 512"><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>')
}

但是由于svg不是DOM对象，因此您不能更改其样式。

您可以将SVG代码放入span标签中，如下所示：

的HTML

<span class="icon">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 512 512">
    <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>
</span>

的CSS

.icon {
  display:inline-block;
  width: 100px;
  height: 100px;
}
.icon:hover svg {
  fill: red;
}

如果您真的只想将SVG代码放入CSS中：

.icon {
  display:inline-block;
  width: 100px;
  height: 100px;
  background: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 512 512"><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>')
}
.icon:hover {
  background: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 512 512" fill="red"><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>')
}

您可以使用媒体查询通过屏幕尺寸分配不同的样式。 例如，如果要定位屏幕宽度小于480px的设备：

@media screen and (max-width: 480px) {
  .icon {
    width: 32px;
    heigh: 32px;
  }
}

当然，您无法通过这种方法区分iPhone和Android。 如果需要，您应该使用javascripts 。 您也可以检查设备是否启用了触摸功能 。