使用JS / jQuery在Chrome中添加SVG过滤器

Question

我尝试使用JS为图像添加SVG过滤器。它在Firefox中运行良好。

我调用jQuery的CSS方法来添加一个操作图像的内联样式：

colorFilter = 'url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'changeColor\'><feColorMatrix type=\'matrix\' values=\'' + config['red'] + ' 0 0 0 0 0 ' + config['green'] + ' 0 0 0 0 0 ' + config['blue'] + ' 0 0 0 0 0 ' + config['alpha'] + ' 0' + '\'/></filter></svg>#changeColor")';

我已经使用了转义'的百分比编码。我也以正常的方式逃脱了它。两者都无法在Chrome中使用。 Firefox对两者都很好。

有没有人有任何想法？

Answer 1

根据SVG规范，SVG过滤器处理SVG <image>元素。 Firefox将其扩展为支持applying SVG filters to html <img>个元素，但Chrome尚未实现此功能。