javascript - 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;
}

谢谢..(这是为了了解如何减少 http 调用的总数 - 通过使用 SVG 和 CSS)

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>')
}

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

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

当然你不能用这种方法区分iPhone和Android。如果必须，您应该使用 javascripts 。您还可以检查设备是否为 touch enabled。