带有 JS 的 Fontawesome 5 SVG：svg 如何随字体大小 css 属性 缩放？

Question

FA5 如何通过 font-size css 属性 缩放 SVG 图标？我怎样才能像 Fontawesome 那样缩放这个示例 svg？非常感谢。

svg{
}

<svg height="100" width="100">
  <circle cx="50" cy="50" r="50"/>
</svg> 

Answer 1

它可以通过 font-size 像这样缩放：

svg {width: 3em; height:3em}

#svg1 {font-size:10px}
#svg2 {font-size:20px}

<svg id="svg1" viewBox="0 0 100 100"><circle cx="50" cy="50" r="49"/></svg>

<svg id="svg2" viewBox="0 0 100 100"><circle cx="50" cy="50" r="49"/></svg>

Answer 2

对于 FA5 SVG 图标，它会默认将 class 附加到 svg 元素，因此您可以使用下面的

挂钩它

<div class="myIcon">
    <svg height="100" width="100">
        <circle cx="50" cy="50" r="50"/>
    </svg> 
</div>

.myIcon .svg-inline--fa{
    font-size: 20px;
}