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

[aizya]

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

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

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

[ysc3839]

找个 PNG 解析库，解析 data 中的 PNG 后改变颜色，再替换原来的 data 。

[BahuangShanren]

可以这样 → https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Fills_and_Strokes

[ljpCN]

啥叫改图片的颜色？图片里每个像素的颜色可能都不同，你是指改某个像素的颜色吗？还是换图？还是套滤镜？

[lower]

把 svg 图片 制作成 图标字体 的方式试试？

[aizya]

@ysc3839 这种做法可以，但是感觉有点麻烦。

[aizya]

@BahuangShanren 试了好像不行。直接在 image 标签内部加是没有效果的 。

[aizya]

@ljpCN 我想要做的是给一个颜色，然后将这个图尽可能的展示成这个颜色， 可以看做是给原图加个滤镜。

[no1xsyzy]

@aizya 图片是图片，请直接走图像处理路线
比如我给你这张图，你说说你怎么渲染成红色： https://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/CIE1931xy_blank.svg/500px-CIE1931xy_blank.svg.png

[aizya]

结贴了, 我最终用的是 https://alistapart.com/article/finessing-fecolormatrix/ 这种方法处理的。