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

html 中,引用的 svg 图片是否可以通关 css 控制颜色?

  •  
  •   CSGO · 2022-09-03 15:19:47 +08:00 · 985 次点击
    这是一个创建于 598 天前的主题,其中的信息可能已经有所发展或是发生改变。
    搜索看到很多文章说这样可以:

    <img src="img.svg" alt="" style="
    fill: currentColor;
    color: red;
    ">

    但我试了并不行啊,比如我的一套 svg 图标都是用的黑色,现在想要在页面中以红色展现,不过这样直接添加 css 没有起到作用。
    7 条回复    2022-09-11 08:04:36 +08:00
    murmur
        1
    murmur  
       2022-09-03 15:30:08 +08:00
    要在 path 上控制 path 给他加个 id 啥的就可以改颜色了,有那种库专门搞这个的,具体忘了是啥
    cuvii
        2
    cuvii  
       2022-09-03 15:34:43 +08:00
    https://www.npmjs.com/package/hex-to-css-filter
    用这个库把 hex 颜色转换为 css filter ,再用 css 的 filter 属性就可以变色了
    Kaciras
        3
    Kaciras  
       2022-09-03 18:10:45 +08:00
    要直接用<svg>元素,不能<img>
    CSGO
        4
    CSGO  
    OP
       2022-09-05 15:51:47 +08:00
    @Kaciras 我现在是:
    <img src="img/1.svg" alt="">
    看了下菜鸟教程:
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <text x="0" y="15" fill="red">I love SVG</text>
    </svg>

    我应该怎么改呢?
    Kaciras
        5
    Kaciras  
       2022-09-05 17:58:56 +08:00
    @CSGO 改 fill 属性,`text { fill: blue }`
    CSGO
        6
    CSGO  
    OP
       2022-09-05 18:13:19 +08:00 via Android
    @Kaciras 我的意思是 svg 标签里怎么写引用我的 img/1.svg
    kongkx
        7
    kongkx  
       2022-09-11 08:04:36 +08:00 via iPhone
    src 引入的没办法用 属性修改的方式来处理。 最多只能像 楼上说的 filter 类 修改渲染 compose 的方式来处理。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1021 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 22:09 · PVG 06:09 · LAX 15:09 · JFK 18:09
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.