前端切图之svg图标的复用基于defs和use 亲测有用

切图网长期致力于web前端开发外包服务,而我们也关注到现在图标很多时候采用svg更多一点,然后图标字体文件已经提供了很多种类的图标,不过采用svg图标可以自行选择更符合、更好看的图标,相比于字体图标更加多样性,而且svg图标加载更快,而当svg的图标被多次使用的时候,我们需要一种类似于变量的定义,然后在需要的地方使用,具体使用方法附一段片段,亲测有用。

前端切图之svg图标的复用基于defs和use 亲测有用_第1张图片




很明显上面defs 声明要重复使用的标签
下边use 通过id 引用defs声明的标签

关于svg的defs以及use的解释

SVG的 元素用于预定义一个元素使其能够在SVG图像中重复使用。例如你可以将一些图形制作为一个组,并用 元素来定义它,然后你就可以在SVG图像中将它当做简单图形来重复使用。
SVG 元素可以在SVG图像中多次重用一个预定义的SVG图形,包括 元素和元素。被重用的图形可以在定义 的内部(图形将不可见直到使用use来引用它)或外部。

文章来源:前端切图之svg图标的复用基于defs和use 亲测有用 | 切图网 

你可能感兴趣的:(前端,切图)