svg的小技巧

最近写的项目,用的svg,哇晒,总是粘贴,简直是恶心代码一点不美观,然后今天网上查了一下,发现可以这么用,就是引用一次,在要用的地方就引入就可以了,不用每次都粘贴.感觉代码又可以干净一点了,66666


image.png

上面是一个很常规的svg引入到HTML文件中的样子,那么如果我一个HTML里面很多地方都有用这个svg,如果我用我就粘贴就真的很恶心,那我可以像下面这样子,给他用一个symbols标签包裹起来,然后给该标签去一个id名,给svg标签设置style属性为display:none,如下图:


image.png

我这个是在一个单独的组件里面引入的,然后我在入口文件里面,引入这个组件,如下:
image.png

这样我就可以在全局使用这些svg啦,比如我在demo.vue里面使用,我只需要一个svg标签包裹一个use标签,然后在xlink:href后面加上对应的id名就可以了:


image.png

关于svg这个还有待深究.
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容