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

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

<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<defs>
<svg id="arrow" t="1679131367532" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2751" ><path d="M853.333333 507.733333H128v42.666667h733.866667l-145.066667 145.066667 29.866667 29.866666 192-192L746.666667 341.333333l-29.866667 29.866667 136.533333 136.533333z" p-id="2752"></path></svg><svg id="arrow2" t="1679142433896" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5839" ><path d="M709.845333 250.346667a22.4 22.4 0 0 1 0.533334-30.848 20.48 20.48 0 0 1 29.717333 0.64l272.426667 292.693333-272.426667 292.650667a20.458667 20.458667 0 0 1-29.717333 0.64c-8.32-8.32-8.746667-21.973333-0.533334-30.848l242.346667-262.464-242.346667-262.464z" p-id="5840"></path></svg>
</defs>
</svg><use xlink:href="#arrow2" fill="#ffffff"></use></svg>

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

关于svg的defs以及use的解释

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

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

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

5款前端切图工具大比拼：谁是最强切图神器
前端切图是前端工程师们还原设计稿的过程中必不可缺的一环.不过,切图工作究竟谁来做?这个问题我们在各大论坛也屡见不鲜:前端工程师认为设计师出了设计稿,那么相应的切图也应该一并交付:设计师则认为前端工程师 ...
前端切图神器avocode
前端切图神器avocode 安装avocode 前端的基础工作就是把设计师的设计稿还原成前端页面,所以切图是作为一个前端的基本技能.杀敌要有趁手的兵器,而前端一般都是用photoshop,但是这个兵器 ...
介绍一个前端切图神器avocode
2019独角兽企业重金招聘Python工程师标准>>> 安装avocode 前端的基础工作就是把设计师的设计稿还原成前端页面,所以切图是作为一个前端的基本技能.杀敌要有趁手的兵器,而 ...
前端切图案例课程一则-姜威-专题视频课程
前端切图案例课程一则-201人已学习课程介绍本课程以一套响应式网站设计图,进行切图为案例,还原老司机整个切图过程.本课程属于初级的前端工程师系列课程中案例课程的第一套课程,本课程需 ...
超全面的前端切图技巧，读这篇就够了
工欲善其事,必先利其器! 相信每个前端都经历过用PS手动切图的原始手法,有时候偷懒,还会直接用QQ截图,现在想想真是初生牛犊不怕虎,怎么方便怎么来~ 当时就在想,如果能有一款神器,帮我解放切图这种&q ...
linux 切图软件下载,学会23个linux常用命令，不做前端切图仔~
来源 | https://segmentfault.com/a/1190000021439560 前言一个前端好好切图不好吗?为什么要学 linux 呢? 嗯,真香 ! 1. ls 命令 : 显示目录 ...
在线ps html源码,PSD to HTML5 - 专业前端切图（PSDoHTML.com）
+ 核心服务将提供的PSD.AI等设计稿转化为html5网页代码,包括常规切图.自适应切图.手机网站切图.微信H5动画(邀请函等)等.不提供设计与修改设计稿服务. PC 前端:常规.动效.管理后台. ...
html5 图,PSD to HTML5 - 专业前端切图（PSDoHTML.com）
+ 核心服务将提供的PSD.AI等设计稿转化为html5网页代码,包括常规切图.自适应切图.手机网站切图.微信H5动画(邀请函等)等.不提供设计与修改设计稿服务. PC 前端:常规.动效.管理后台. ...
蓝湖ui设计图直接转换html,蓝湖使用规范（用于管理UI及前端切图）
蓝湖使用规范一.蓝湖插件下载及安装二.团队项目建立流程 1.新建团队(横琴人寿) 2.新建项目在对应的团队下新建项目例如官微项目,官网项目,i保项目,哆来咪项目 3.新建分组在相应的项目下按 ...

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

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

最新文章

热门文章