Chrome中SVG混合模式Bug

Question

最近我在一个项目中需要使用SVG和混合模式滤镜。基本元素是一个背景图像，然后有一些形状（大多数是具有实心填充的路径）。问题是Chrome似乎在渲染方面有些困难——背景图像太亮，周围出现了一些奇怪的过度曝光的矩形。而Firefox和Opera同时工作得很好。

这里有一个带有额外设置以展示错误的示例：演示实例 代码的最重要部分如下：

<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来说是一种修复方法，但它并不是一个令人满意的解决方案。

有人知道这个bug的原因吗？也许是我做错了什么？我已经花费数十小时来解决这个问题，但还没有效果。

- RamboBambo

---

嗯，确实很奇怪。Safari也运行良好。我认为这可能是一个错误，也许是这个？http://code.google.com/p/chromium/issues/detail?id=131825&q=svg%20filter%20blend&colspec=ID%20Pri%20Mstone%20ReleaseBlock%20OS%20Area%20Feature%20Status%20Owner%20Summary - methodofaction

另外需要注意的是，如果您在Chrome Canary中启用了硬件加速的SVG滤镜，则该错误将消失。 - methodofaction

是的，你说得对。我希望新版Chrome能够修复这个bug。 - RamboBambo

Answer 1

我曾经遇到过类似的问题，我的解决方法是从html头部中删除base元素。我认为这可能是chrome浏览器的一个bug。

- jlguenego