是否可以通过 css 或者 js 改变 svg 中引入 png 图片的颜色？
lifesimple · 2016-12-18 15:12:40 +08:00 · 4163 次点击这是一个创建于 2900 天前的主题，其中的信息可能已经有所发展或是发生改变。
我现在的问题在于我操作的元素是 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 图片，一些交互操作改变图片的颜色。
第 1 条附言 · 2016-12-18 17:13:05 +08:00
项目是拓扑图相关交互，用到的图片主要是用来做节点 icon 。
如果不考虑用户自定上传图片，用 iconfont 的形式展示就可以很好实现。
如果不考虑用户自定上传图片，用 iconfont 的形式展示就可以很好实现。
第 2 条附言 · 2016-12-19 16:13:55 +08:00
http://stackoverflow.com/questions/41207097/is-it-possible-to-change-color-of-png-image-in-svg-element-by-css-or-javascript
通过 svg filter feColorMatrix 可以做到改变颜色
通过 svg filter feColorMatrix 可以做到改变颜色
 |
1
learnshare 2016-12-18 16:51:00 +08:00  1
引入 canvas 相关的库，就可以做类似的事情了吧
比如 https://github.com/AlloyTeam/AlloyImage |
 |
2
lifesimple OP @learnshare 谢谢 这是一个思路 但就现在的项目应该使用不了 AlloyImage 因为是 svg 的东西，再者引入一个专门的图像处理库太重了
|
|
3
learnshare 2016-12-18 17:19:32 +08:00
@lifesimple 不是因为 SVG 用不了 AlloyImage
|
Select Language