【发布时间】：2012-10-21 14:01:33
【问题描述】：
最近我正在处理一个项目，我需要使用 SVG 并且它是混合模式过滤器。 基本元素是背景图像，然后是一些形状（主要是实心填充的路径）。 问题是 Chrome 的渲染似乎有些困难 - 背景图像太亮，混合路径周围出现一些奇怪的过亮矩形。 Firefox 和 Opera 同时运行良好。
有一个显示错误的额外设置示例：Live example
代码中最重要的部分：
<svg version="1.1" id="layer-0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="1097" height="835" viewBox="0 0 1097 835">
<defs>
<filter id="img">
<feImage xlink:href="static/img/bg.jpg" x="0" y="0" width="100%" height="100%" />
</filter>
<filter id="filter">
<feImage result="img1" xlink:href="static/img/bg.jpg" x="0" y="0" width="100%" height="100%" />
<feBlend mode="multiply" in="SourceGraphic" in2="img1" result="multi" />
</filter>
</defs>
<image xlink:href="static/img/bg.jpg" width="100%" height="100%" />
<g style="filter:url(#img)" height="100%" width="100%" id="fix"></g>
<circle filter="url(#filter)" class="shape" cx="560" cy="380" r="120" />
我不得不添加一个额外的图像标签，因为#filter 中使用的背景被剪裁了（但为什么？）。 是对 Chrome 的修复，但它不是一个令人满意的解决方案。
有谁知道这个错误的原因是什么？也许我做错了？我花了几十个小时解决这个问题，仍然没有效果。
【问题讨论】：
-
嗯，这确实很奇怪。 Safari 也可以正常工作。我希望这是一个错误，也许是这个？ code.google.com/p/chromium/issues/…
-
另一个注意事项：如果您在 Chrome Canary 中启用硬件加速 SVG 过滤器，该错误就会消失。
-
是的，你是对的。我希望新的 Chrome 版本能够修复这个错误。
标签： google-chrome svg blending svg-filters