使用svg的三种方法

1.div的bgurl方法

<div class="icon-like"></div>
<style  lang="scss">
    .icon-like {
       width:25px;
       height:25px;
       background:url(./src/svg/收藏.svg) 0 0 no-repeat;
}
</style>

2.div的img方法

<div class="icon-like">
    <img src="./src/svg/收藏.svg" alt="收藏">
</div>
<style lang="scss">
    .icon-like {
       width:25px;
       height:25px;
         img {
             width:25px;
             height:25px;
      }
     }
</style>

3.svg精灵图

1)各svg改为symbol，写好id名

2) 外套一个svg，写好内联样式style="position:absolute;"

3)调用其中的一个svg，<svg width="25px" height="25px" ><use xlink:href="#icon-play"></use></svg>

版权声明：本文著作权归本人和饥人谷所有，转载请注明出处。

编辑于 2022-02-08 21:32
SVG
前端开发