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

V2EX = way to explore

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

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

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

举个例子，现在有一个 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

2021-03-09 15:15:07 +08:00 via Android

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

BahuangShanren

2021-03-09 15:20:48 +08:00 via Android

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

ljpCN

2021-03-09 22:00:37 +08:00

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

lower

2021-03-09 22:17:18 +08:00

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

aizya

2021-03-10 09:43:18 +08:00

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

aizya

2021-03-10 09:44:51 +08:00

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

aizya

2021-03-10 09:46:52 +08:00

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

no1xsyzy

2021-03-10 11:14:03 +08:00

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

aizya

2021-03-17 22:41:32 +08:00

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