Question

FA5如何通过 font-size css属性缩放 SVG 图标？我怎么能像Fontawesome一样扩展这个例子svg呢？非常感谢你。

＆＃13;

svg{
}

＆＃13;

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

＆＃13;

Answer 1

可以通过svg {width: 3em; height:3em} #svg1 {font-size:10px} #svg2 {font-size:20px}进行缩放，如下所示：

＆＃13;

<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>

＆＃13;

 <p id="ok"></p>
        <script>
            document.getElementById("ok").innerHTML =
 Math.floor(Math.random() * 10);
        </script>
 <script>
        if (ok >=6){
        winner="yes"
        else 
        loser="no"
    }
</script>

＆＃13;

Answer 2

使用FA5 SVG图标时，它会将一个类附加到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;
}

带JS的Fontawesome 5 SVG：svg如何使用font-size css属性进行缩放？

2 个答案: