svg矢量图标在html中的使用, （知识点：1.通过h5…

svg矢量文件体积小，不变形，比传统的png先进，比现在流行的icon-font灵活。然而在使用过程中还是遇到了很多坑。今天花了一天时间把经验整理出来，以供后来者借鉴。如果您从本文收益，请留言mark一下。

这里我们要实现的功能是，一个svg文件包含多个图形，这样的好处是，网络请求次数少，加载快速。否则一个网页有10个图标就要请求10次。

 

一、制作svg

1.用记事本新建一个mysvg.svg , 里面内容如下

<svg xmlns="http://www.w3.org/2000/svg">

</svg>

2.用 ai 制作了一个 svg文件, 把这个文件中的<svg>部分替换成symbol, 去掉所有属性，只保留viewbox ,并增加一个id属性（便于引用），然后拷贝到mysvg.svg中的svg标签中间 方便引用。

如下图：

<svg xmlns="http://www.w3.org/2000/svg">

<symbol viewBox="70 -135 400 400" id="buy">

<path class="st0" d="M360.8,215.5c-12.1,0-21.9,10.3-21.9,23.1s9.8,23.1,21.9,23.1s22-10.3,22-23.1S373,215.5,360.8,215.5z ">
<set to="blue" begin="click" restart="always" fill="remove" attributeName="fill"></set>
</path>
<path class="st0" d="M206.2,217.1c-11.7,0-21.2,10-21.2,22.3s9.5,22.3,21.2,22.3s21.2-10,21.2-22.3
C227.3,227.1,217.9,217.1,206.2,217.1z"/>
<path class="st0" d="M398.7,181.7c-0.2,0-0.3,0-0.5,0.1c-0.1,0-0.2-0.1-0.2-0.1H214.7c-15.8,0-17.5-3.6-20.7-15.1
c-0.8-3-1.7-6.2-2.7-9.7l188-27.9c24.1-3.6,28.4-14.5,28.4-34.7V45.8c0-17.6-13.7-32-30.4-32H192.5h-0.1c-0.1,0-0.2,0-0.3,0
c-6.6,0-12,5.8-12,13.1s5.4,13.1,12,13.1c0.1,0,0.2,0,0.3,0h0.1h173.6c8.4,0,15.2,7.2,15.2,16v22.6c0,14.2-0.4,16.6-15.4,18.8
l-183,28.9c-18-66.2-44-162.6-44-162.6c-0.9-3.5-3.9-5.8-7.3-5.8H95.1c-0.1,0-0.2,0-0.3,0.1c-0.2,0-0.4-0.1-0.6-0.1
c-6.7,0-12.2,5.9-12.2,13.3c0,7.3,5.4,13.3,12.2,13.3c0.2,0,0.5-0.1,0.7-0.1c0.1,0,0.1,0.1,0.2,0.1h18.4
c7.5,27.8,39.9,148,53.4,197.1c4.8,17.3,11.8,26.7,35.3,26.7h195.7c0.1,0,0.1,0,0.2,0c0.2,0,0.3,0.1,0.5,0.1
c6.7,0,12.2-5.9,12.2-13.3C410.9,187.6,405.4,181.7,398.7,181.7z"/>
</symbol>

<symbol viewBox="70 -135 400 400" id="sell">

<path class="st0" d="M206.2,217.1c-11.7,0-21.2,10-21.2,22.3s9.5,22.3,21.2,22.3s21.2-10,21.2-22.3
C227.3,227.1,217.9,217.1,206.2,217.1z"/>

</symbol>
</svg>

可如此增加多个svg文件到单独的svg文件中国

二、html中引用这个svg

css:

<style>
.mytest{
fill:#00f;
background-color:#600;
}

/* 点击时的样式
.mytest:active{
fill:#0f0;
}
</style>

html:

<svg  class="mytest" ><use  xlink:href="/images/mysvg.svg#buy" /></svg>

<svg  class="mytest" ><use  xlink:href="/images/mysvg.svg#sell" /></svg>

至此，已经实现。

注意:

1这样制作的svg无法通过img的src或 div的background-image引入

2.通过<svg>方式嵌入svg时，  在.svg文件中指定的css(用 <style>标记的属性）会被忽略掉。只能在html中通过 css或直接指定style. 常用的style是fill,就是填充色

3.通过<img> 或background引入svg时，svg文件中的css可起作用

 参考文献：https://blog.csdn.net/u010582082/article/details/70195629

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有