svg合并

2019-04-28  本文已影响0人  古水木

假如页面有多个svg图标要加载,多次加载不利,可将多个svg合并为一个加载

如下有两个svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 482 504.5">
中间是svg的具体内容
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 482 504.5">
中间是svg的具体内容
</svg>

将他们的前后缀改为symbol,并添加id,结果如下

<symbol id="icon-pre" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 482 504.5">
中间是svg的具体内容
</symbol >

<symbol id="icon-next" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 482 504.5">
中间是svg的具体内容
</symbol >

并通过如下方式引用

 <p><svg><use xlink:href="#icon-pre"></use></svg></p>
 <p><svg><use xlink:href="#icon-next"></use></svg></p>
上一篇 下一篇

猜你喜欢

热点阅读