javascript - 使用 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 对此进行了扩展以支持将 SVG 过滤器也应用于 html <img>元素，但 Chrome 尚未实现此功能。