V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
LeeReamond
V2EX  ›  问与答

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

  •  
  •   LeeReamond · 2022-02-15 01:16:29 +08:00 · 1251 次点击
    这是一个创建于 1003 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如题,外购代码中有一个返回图标感觉不太直观,想换一个自己喜欢的,但是不知道怎么修改。目前图标是这样的,使用 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 文件是从哪里被调出来的,也没找到类似打包的文件,业余前端搞不懂了

    13 条回复    2022-02-16 11:27:56 +08:00
    P233
        1
    P233  
       2022-02-15 06:12:12 +08:00
    找这个页面里 <defs></defs> 定义的 #home
    ynyounuo
        2
    ynyounuo  
       2022-02-15 06:18:56 +08:00
    rg 'id="home"'
    LeeReamond
        3
    LeeReamond  
    OP
       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
        4
    P233  
       2022-02-15 07:05:06 +08:00
    试试从 devtools 里搜 <defs> 标签,可能是外部资源注入到 DOM 里的

    <use xlink:href="#home"></use> 一定用的是本页 DOM 里的 id
    LeeReamond
        5
    LeeReamond  
    OP
       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
        6
    P233  
       2022-02-15 07:17:16 +08:00
    @LeeReamond 那 DOM 里搜 id="home" 能找到吗?
    LeeReamond
        7
    LeeReamond  
    OP
       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
        8
    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
        9
    P233  
       2022-02-15 07:44:06 +08:00
    @3dwelcome 666666

    @LeeReamond 要不把 font awesome 里需要的图标也做成 symbols 然后 想他这样 <use ...> 吧。毕竟一个一个替换,不便管理,量大可以尝试维护一套新的图标。
    LeeReamond
        10
    LeeReamond  
    OP
       2022-02-15 11:19:16 +08:00 via Android
    @P233 我就想换一个图标。问题是不知道这个 svg 是哪里引入过来的,不知道怎么改,明显是框架作者自己打包的,而不是从 fa 之类的地方引用。搜了搜源码文件夹完全搜不到 svg 字符串
    sgiyy
        11
    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
        12
    LeeReamond  
    OP
       2022-02-15 22:17:53 +08:00
    @sgiyy 老哥好牛啊,预测文件名都分毫不差怎么做到的。原作者最近联系不上一直没回我消息,我直接用其他方式把这个文件自己提供服务了不就行了
    sgiyy
        13
    sgiyy  
       2022-02-16 11:27:56 +08:00
    @LeeReamond #12 iconfont 现在前端项目用的比较多,所以大胆猜测了下。能联系上最好,方便后期维护;联系不上就自己单独替换这个图标吧。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2549 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 16:04 · PVG 00:04 · LAX 08:04 · JFK 11:04
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.