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

[lifesimple]

PNG 格式小图标的 CSS 任意颜色赋色技术

我现在的问题在于我操作的元素是 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 图片，一些交互操作改变图片的颜色。

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

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

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

[learnshare]

引入 canvas 相关的库，就可以做类似的事情了吧
比如 https://github.com/AlloyTeam/AlloyImage

[lifesimple]

@learnshare 谢谢 这是一个思路 但就现在的项目应该使用不了 AlloyImage 因为是 svg 的东西，再者引入一个专门的图像处理库太重了

[learnshare]

@lifesimple 不是因为 SVG 用不了 AlloyImage