Chrome中的SVG混合模式错误

最近我正在开发一个项目，我需要使用SVG和它的混合模式过滤器。基本元素是一个背景图像，然后有一些形状（主要是固体填充路径）。问题是，Chrome似乎有一些渲染的困难 - 背景图像太亮，一些奇怪的overbrighten矩形出现在混合路径周围。 Firefox和Opera在同一时间正常工作。Chrome中的SVG混合模式错误

有额外的设置为例，说明该bug：

<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" />

我有，因为在使用后台添加一个额外的图像标签：Live example

代码的最重要的部分#filter被剪辑（但为什么？）。是Chrome的修复程序，但它不是一个令人满意的解决方案。

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

来源

2012-11-01 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 – Duopixel

另注：如果您在Chrome Canary中启用硬件加速SVG筛选器，则该错误消失。 – Duopixel

是的，你是对的。我希望新的Chrome版本能够解决这个错误。 – RamboBambo

我有类似的问题，我通过从html标题中删除基本元素来解决它。我认为这是一个铬的错误。

来源

2013-12-03 13:06:34 jlguenego

Chrome中的SVG混合模式错误

回答

相关问题