前端如何替换单个 SVG 图标的图片内容？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1048 天前的主题，其中的信息可能已经有所发展或是发生改变。

如题，外购代码中有一个返回图标感觉不太直观，想换一个自己喜欢的，但是不知道怎么修改。目前图标是这样的，使用 xlink:href 控制调用图标样式

<div class="btn-icon sm-none" data-toggle="tooltip" data-placement="left">
    <svg class="icon icon-32" aria-hidden="true">
        <use xlink:href="#home"></use>
    </svg>
</div>

希望更换成另一个图标，但沿用框架整体样式（框架样式会根据主题选择不同动态变化，所以不能直接换一张矢量图上去）。问题是翻了翻网站文件也没找到这个#home 文件是从哪里被调出来的，也没找到类似打包的文件，业余前端搞不懂了

图标

svg

xlink

div

13 条回复 • 2022-02-16 11:27:56 +08:00

P233

2022-02-15 06:12:12 +08:00

找这个页面里 <defs></defs> 定义的 #home

ynyounuo

2022-02-15 06:18:56 +08:00

rg 'id="home"'

LeeReamond

2022-02-15 06:56:28 +08:00

@P233 搜索全文件夹，字符串 home 仅在调用时出现一次，其他出现<defs>的地方还有两处，分别是

<title>typecho-logo</title>
<description>Created with Sketch ( http://www.bohemiancoding.com/sketch)</description>
<defs></defs>

以及

<svg class="waves-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<defs><path id="gentle-wave" d="M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z"></path></defs>

似乎看起来都是不相关的图标。搜索 index.html 的渲染后网页源码中也未找到相关<defs>字段，它可能被引用在其他文件中吗？

P233

2022-02-15 07:05:06 +08:00

试试从 devtools 里搜 <defs> 标签，可能是外部资源注入到 DOM 里的

<use xlink:href="#home"></use> 一定用的是本页 DOM 里的 id

LeeReamond

2022-02-15 07:10:02 +08:00

@P233 感谢老哥回复，F12 搜索 dom 的话提示<defs>字段共一处，就是 3#中那个<defs><path id="gentle-wave" d="M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z"></path></defs>的东西，我推测这个 d 属性应该就是描述形状的，这么短应该跟图标无关，好怪啊。

P233

2022-02-15 07:17:16 +08:00

@LeeReamond 那 DOM 里搜 id="home" 能找到吗？

LeeReamond

2022-02-15 07:25:25 +08:00

@P233 我按照你的思路把页面右键另存为了一下然后搜索找到了，它的定义是在一个<svg>标签里，然后用
<symbol id="home" viewBox="0 0 1158 1024"><path d="M102..."</symbol>这个方式定义的。我不知道怎么定位到这个 svg 标签是哪个资源引入的，然后我比如我找到一个喜欢的图标，是 fontaweosome 里的，我要怎么把它贴到这个资源里呢。

3dwelcome

2022-02-15 07:26:18 +08:00

这题我会。

xlink:href="#home"就是引用另一个 id 为 home 的 svg dom 。

找 dom 可以在控制台输入 document.getElementById('home')，然后对 DOM 点右键，菜单里选择“Reveal in Elements panel”就自动跳过去了。

P233

2022-02-15 07:44:06 +08:00

@3dwelcome 666666

@LeeReamond 要不把 font awesome 里需要的图标也做成 symbols 然后想他这样 <use ...> 吧。毕竟一个一个替换，不便管理，量大可以尝试维护一套新的图标。

LeeReamond

2022-02-15 11:19:16 +08:00 via Android

@P233 我就想换一个图标。问题是不知道这个 svg 是哪里引入过来的，不知道怎么改，明显是框架作者自己打包的，而不是从 fa 之类的地方引用。搜了搜源码文件夹完全搜不到 svg 字符串

sgiyy

2022-02-15 16:21:46 +08:00

@LeeReamond #10 像这种一般都是通过从别的 icon 网站上引入一个 js 文件，加载 SVG 文件。你检查下 head 标签里有没有 src 是这样的 script 标签 <script src="//at.alicdn.com/t/font_xxx_xxx.js"></script>，如果是的话你需要从找项目开发者要一下这个 iconfont 的权限。
或者，你下载一个 SVG 文件，原页面上直接替换你想要修改的地方，这是最简单的

LeeReamond

2022-02-15 22:17:53 +08:00

@sgiyy 老哥好牛啊，预测文件名都分毫不差怎么做到的。原作者最近联系不上一直没回我消息，我直接用其他方式把这个文件自己提供服务了不就行了

sgiyy

2022-02-16 11:27:56 +08:00

@LeeReamond #12 iconfont 现在前端项目用的比较多，所以大胆猜测了下。能联系上最好，方便后期维护；联系不上就自己单独替换这个图标吧。