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

怎么更改 SVG 中的图片的颜色

aizya · 2021-03-09T06:54:09Z

举个例子，现在有一个 SVG，内部嵌套了很多图片，都是以 base64 的形式存放在标签中展示的：想请教一下，怎么可以动态的更改这个图片的颜色？

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 1915 days ago, the information mentioned may be changed or developed.

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

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

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

9 replies • 2021-03-17 22:41:32 +08:00

ysc3839

Mar 9, 2021 via Android

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

BahuangShanren

Mar 9, 2021 via Android

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

ljpCN

Mar 9, 2021

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

lower

Mar 9, 2021

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

aizya

Mar 10, 2021

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

aizya

Mar 10, 2021

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

aizya

Mar 10, 2021

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

no1xsyzy

Mar 10, 2021

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

aizya

Mar 17, 2021

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