3

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

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

4

1 回答 1

0

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

于 2013-12-03T13:06:34.573 回答