移动到SVG图标 - 如何将它们从代码中分离？ [英] Moving to SVG icons - how to separate them from the code?

问题描述

SVG图标比字体图标有一些优势：它们可以缩放以适应可变大小的容器元素，并且您可以理论上更改单个路径的颜色。我也喜欢的事实，我可以很容易地使它们在Inkscape：P

但是如何移动在CSS文件中的SVG，以便它们可以重用在同一页

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

解决方案

blockquote>

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

使用svg模板

允许创建svg模板。

模板（html）

 < svg width = 100pxheight =100pxviewBox =0 0 100 100class =hide> 
< circle id =circle-tmpcx =50cy =50r =50/> 
< / svg> 
  

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

.hide {display：none;} // css

使用（html）

 < svg viewBox =0 0 100 100 class =circle-first> 
< use xlink：href =＃circle-tmp/> 
< / svg> 
  

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

如何在同一个css文件中更改路径颜色？

b
$ b

css

  .circle-first {
 fill：＃12bb34; 
} 
  

工作示例？
在这里：小提琴

浏览器支持？不是100％确定，但svg在所有大型浏览器支持： CanIUseIt

SVG icons have some advantages over font icons: they can be scaled to fit a variable-sized container element, and you can theoretically change color of individual paths. I also like the fact that I can easily make them in Inkscape :P

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?

The background property supports SVG, with background: url(#svg_element), but that means I have to put the SVG in the HTML :| If I put it as a "data" string, how do I change path colors in the same css file?

解决方案

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?

With svg templates

Lets create a svg template.

Template (html)

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

Its a template so we hide it. (but still in the DOM)

.hide { display: none;} //css

Use (html)

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

This can be reused anywhere on the page.

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

Easy, just style it!

css

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

Working example? Here you go: Fiddle

Browser support? Not 100% sure, but svg support in all big browsers: CanIUseIt

这篇关于移动到SVG图标 - 如何将它们从代码中分离？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！