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混合模式錯誤

回答

相關問題