html - 转向 SVG 图标——如何将它们与代码分开？

Question

SVG 图标与字体图标相比有一些优势:它们可以缩放以适应可变大小的容器元素，并且理论上您可以更改各个路径的颜色。我也喜欢我可以在 Inkscape 中轻松制作它们的事实:P

但我如何在 CSS 文件中移动 SVG，以便它们可以在同一页面上重复使用，如图标字体，并且仍然受益于这些优势？

background 属性支持 SVG，background: url(#svg_element)，但这意味着我必须将 SVG 放在 HTML 中:| 如果我将它作为“数据”字符串，我该如何更改同一个 css 文件中的路径颜色？

Answer 1

But how do I move the SVG in the CSS file so they can be reused on the same page, like icon fonts, and still benefit from these advantages?

使用 svg 模板

让我们创建一个 svg 模板。

模板 (html)

<svg width="100px" height="100px" viewBox="0 0 100 100" class="hide">
    <circle id="circle-tmp" cx="50" cy="50" r="50" />
</svg>

它是一个模板，所以我们隐藏它。 (但仍在 DOM 中)

.hide { display: none;}//css

使用 (html)

<svg viewBox="0 0 100 100" class="circle-first">
    <use xlink:href="#circle-tmp" />
</svg>

这可以在页面的任何地方重复使用。

how do I change path colors in the same css file?

简单，只需设计样式即可!

CSS

.circle-first {
    fill: #12bb34;
}

工作示例？ 给你:Fiddle

浏览器支持？不是 100% 确定，但所有大型浏览器都支持 svg:CanIUseIt