V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
aizya
V2EX  ›  JavaScript

怎么更改 SVG 中的<image>图片的颜色

  •  
  •   aizya · 269 天前 · 1156 次点击
    这是一个创建于 269 天前的主题,其中的信息可能已经有所发展或是发生改变。

    举个例子,现在有一个 SVG,内部嵌套了很多图片,都是以 base64 的形式存放在<image>标签中展示的:

    <image style="overflow:visible;" width="6792" height="1974" id="A0_图像" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAGokAAAe3CAYAAACvqtxxxxxxx"/>
    

    想请教一下,怎么可以动态的更改这个图片的颜色?

    9 条回复    2021-03-17 22:41:32 +08:00
    ysc3839
        1
    ysc3839  
       269 天前 via Android
    找个 PNG 解析库,解析 data 中的 PNG 后改变颜色,再替换原来的 data 。
    ljpCN
        3
    ljpCN  
       269 天前
    啥叫改图片的颜色?图片里每个像素的颜色可能都不同,你是指改某个像素的颜色吗?还是换图?还是套滤镜?
    lower
        4
    lower  
       269 天前
    把 svg 图片 制作成 图标字体 的方式试试?
    aizya
        5
    aizya  
    OP
       269 天前
    @ysc3839 这种做法可以,但是感觉有点麻烦。
    aizya
        6
    aizya  
    OP
       269 天前
    @BahuangShanren 试了好像不行。直接在 image 标签内部加是没有效果的 。
    aizya
        7
    aizya  
    OP
       269 天前
    @ljpCN 我想要做的是给一个颜色,然后将这个图尽可能的展示成这个颜色, 可以看做是给原图加个滤镜。
    no1xsyzy
        8
    no1xsyzy  
       268 天前
    @aizya 图片是图片,请直接走图像处理路线
    比如我给你这张图,你说说你怎么渲染成红色: https://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/CIE1931xy_blank.svg/500px-CIE1931xy_blank.svg.png
    aizya
        9
    aizya  
    OP
       261 天前
    结贴了, 我最终用的是 https://alistapart.com/article/finessing-fecolormatrix/ 这种方法处理的。
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2051 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 02:01 · PVG 10:01 · LAX 18:01 · JFK 21:01
    ♥ Do have faith in what you're doing.