是否可以通过 css 或者 js 改变 svg 中引入 png 图片的颜色？

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

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

我现在的问题在于我操作的元素是 svg ，即图片的引入是通过 svg image 元素 xlink:href 来引入图片的。尝试 demo

在 MDN 上查了关于 svg 滤镜 filter 的相关 API ，和上述 drop-shadow 相似的 api 是 svg filter 中的feOffset但是这个属性只是提供偏移。 w3cschools 上关于这个“ Drop shadows ”的一些 demo,但我觉得 svg filter 中的 feOffset 和 css3 filter 滤镜中 drop-shadow 的功能还是差一点（吐槽一下 w3cschool 这样的描述）。给的 demo 是几个 filter 效果的组合使用。

PNG 格式小图标的 CSS 任意颜色赋色技术中利用了 drop-shadow"真正投影"(相对于 box-shadow 仅仅是盒投影)，通过定位方式隐去真是图片显示改变颜色的投影实现。看了一遍 svg 中 filter 相关 api ，没有发现相关能改变投影颜色的。

我感觉按这种方式想去改变 svg 中引入 png 图片的颜色是行不通的。

不知道还有什么其他的方案。如果你有什么好的想法，有空的话，求指点一二，谢谢。

ps: 吐槽下需求，需求是想用户上传 png 图片，一些交互操作改变图片的颜色。

Supplement 1 · Dec 18, 2016

项目是拓扑图相关交互，用到的图片主要是用来做节点 icon 。
如果不考虑用户自定上传图片，用 iconfont 的形式展示就可以很好实现。

Supplement 2 · Dec 19, 2016

http://stackoverflow.com/questions/41207097/is-it-possible-to-change-color-of-png-image-in-svg-element-by-css-or-javascript

通过 svg filter feColorMatrix 可以做到改变颜色