Question

有没有办法定义SVG内联？例如，我可以使用这个CSS为CSS中的按钮背景定义外部SVG，但我不知道如何内联：

<input id="Button867" type="button" value="Button" class="buttonSkin">

.buttonSkin {
    background: url(assets/svg/button_skin_up.svg) 0 0 no-repeat;
    border: 0px;
}

.buttonSkin:hover {
    background: url(assets/svg/button_skin_over.svg) 0 0 no-repeat;
    border: 0px;
}

.buttonSkin:active {
    background: url(assets/svg/button_skin_down.svg) 0 0 no-repeat;
    border: 0px;
}

使用BigBadaBooms建议我应该能够执行以下操作：

<input id="Button867" type="button" value="Button" class="buttonBackgroundSkin">

.buttonBackgroundSkin {
    background-image:url(data:image/svg+xml;base64,<--base64 encoded SVG file-->);
    border: 0px;
}

.buttonBackgroundSkin:hover {
    background-image:url(data:image/svg+xml;base64,<--base64 encoded SVG file-->);
    border: 0px;
}

.buttonBackgroundSkin:active {
    background-image:url(data:image/svg+xml;base64,<--base64 encoded SVG file-->);
    border: 0px;
}

我会更多地研究这个问题。我真的在寻找这样的东西：

<input id="Button867" type="button" value="Button" class="buttonBackgroundSkin">
   <background-image>
      <svg>
       ... 
      </svg>
   <background-image>
   <background-image:hover>
      <svg>
       ... 
      </svg>
   <background-image:hover>
</input>

Answer 1

是的，您可以使用数据网址。类似的东西：

background-image:url(data:image/svg+xml;base64,<--base64 encoded SVG file-->);

您可以通过Google搜索找到许多在线base64编码器。使用其中一个对SVG文件进行编码，然后将其粘贴到上面指示的位置。

Answer 2

您可以将SVG的地址插入img标签的

<img src="http://upload.wikimedia.org/wikipedia/commons/b/b0/NewTux.svg" alt="">

DEMO 但是相同的浏览器不支持此link to caniuse

也许这个例子可以帮到你：
HTML

<a href="#">
<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="blue" />
  <circle class="hover" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
</a>

CSS

.hover{display:none;}
a:hover .hover{display:block}

DEMO

如何设置内联SVG背景？

2 个答案: