google-chrome - Chrome 中的 SVG 混合模式错误

Question

最近我在做一个项目，我需要使用 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 的修复程序，但不是令人满意的解决方案。

有谁知道这个错误的原因是什么？也许我做错了？我花了几十个小时来解决这个问题，仍然没有效果。

Answer 1

我有类似的问题，我通过从 html header 中删除基本元素来修复它。我认为这是 Chrome 中的错误。