使用feImage的SVG feBind在Firefox中似乎不起作用

因此，我使用SVG混合複製了新的iOS7照片應用圖標，並且在IE10，Chrome 27和Safari 6中看起來不錯，但不顯示完全在Firefox中。我錯過了一個明顯的XML咒語嗎？（此外 - 這代碼看起來非常詳細的 - 如果有關於縮寫列表中的任何意見，那將是巨大的） enter image description here 使用feImage的SVG feBind在Firefox中似乎不起作用

<svg width="500px" height="1000px" viewBox="0 0 500 1000" xmlns:xlink="http://www.w3.org/1999/xlink"> 

<defs> 
    <path id="orange" d="M200,50 a35 35 0 0 1 100 0 l0 100 a40 40 0 0 1 -100 0 z" fill="rgb(252,170,30)" /> 
    <path id="yellow" transform="rotate(45 250 200)" d="M200,50 a35 35 0 0 1 100 0 l0 100 a35 35 0 0 1 -100 0 z" fill="rgb(242,229,0)"/> 
    <path id="green" transform="rotate(90 250 210)" d="M200,50 a35 35 0 0 1 100 0 l0 100 a35 35 0 0 1 -100 0 z" fill="rgb(181,213,74)" /> 
    <path id="greenblue" transform="rotate(135 250 210)" d="M200,50 a35 35 0 0 1 100 0 l0 100 a35 35 0 0 1 -100 0 z" fill="rgb(104,193,159)" /> 
    <path id="blue" transform="rotate(180 250 210)" d="M200,50 a35 35 0 0 1 100 0 l0 100 a35 35 0 0 1 -100 0 z" fill="rgb(112,178,226)" /> 
    <path id="violet" transform="rotate(225 250 210)" d="M200,50 a35 35 0 0 1 100 0 l0 100 a35 35 0 0 1 -100 0 z" fill="rgb(166,141,197)" /> 
    <path id="pink" transform="rotate(270 250 210)" d="M200,50 a35 35 0 0 1 100 0 l0 100 a35 35 0 0 1 -100 0 z" fill="rgb(213,135,172)" /> 
    <path id="red" transform="rotate(315 250 210)" d="M200,50 a35 35 0 0 1 100 0 l0 100 a35 35 0 0 1 -100 0 z" fill="rgb(246,116,93)" /> 


    <filter id="blendit"> 
    <feImage xlink:href="#orange" x="0" y="0" result="1"/> 
    <feImage xlink:href="#yellow" x="0" y="0" result="2"/> 
    <feImage xlink:href="#green" x="0" y="0" result="3"/> 
    <feImage xlink:href="#greenblue" x="0" y="0" result="4"/> 
    <feImage xlink:href="#blue" x="0" y="0" result="5"/> 
    <feImage xlink:href="#violet" x="0" y="0" result="6"/> 
    <feImage xlink:href="#pink" x="0" y="0" result="7"/> 
    <feImage xlink:href="#red" x="0" y="0" result="8"/> 

    <feBlend mode="multiply" in="1" in2="2" result="12"/> 
    <feBlend mode="multiply" in="12" in2="3" result="123"/> 
    <feBlend mode="multiply" in="123" in2="4" result="1234"/> 
    <feBlend mode="multiply" in="1234" in2="5" result="12345"/> 
    <feBlend mode="multiply" in="12345" in2="6" result="123456"/> 
    <feBlend mode="multiply" in="123456" in2="7"result="1234567"/> 
    <feBlend mode="multiply" in="1234567" in2="8" result="FINAL"/> 
    <feColorMatrix type="hueRotate" values="0"> 
     <animate attributeName="values" attributeType="XML" values="0; 0;180;360;360" dur="10s" repeatCount="indefinite"/> 
    </feColorMatrix> 
</filter> 
</defs> 

    <rect x="0" y="0" width="500" height="500" filter="url(#blendit)"/> 
</svg>

來源

2013-06-12 Michael Mullany

在Firefox中，feImage目前僅適用於完整圖像而不適用於文檔片段。見https://bugzilla.mozilla.org/show_bug.cgi?id=455986 –

謝謝羅伯特。我忘了我已經知道了！如果您將評論添加爲答案，我會接受它。 –

在Firefox feImage目前僅實施了完整的圖像，而不是對文件片斷。請參閱bug 455986

來源

2013-06-13 08:11:37

使用feImage的SVG feBind在Firefox中似乎不起作用

回答

相關問題