技术解析

怎么更改 SVG 中的<image>图片的颜色
0
2021-08-10 01:05:15
idczone

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


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


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

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

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

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

这种做法可以,但是感觉有点麻烦。

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

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

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

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

数据地带为您的网站提供全球顶级IDC资源
在线咨询
专属客服