SVG feBlends using feImage doesn't seem to work in Firefox

问题

So I was duplicating the new iOS7 photo app icon using SVG blends, and got to something that looks good in IE10, Chrome 27 and Safari 6, but doesn't display at all in Firefox. Am I missing an obvious XML incantation? (Also - this code seems very verbose - if there are any suggestions on abbreviating this list, that would be great)

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

回答1:

In Firefox feImage is only currently implemented for complete images and not for document fragments. See bug 455986

来源：https://stackoverflow.com/questions/17075857/svg-feblends-using-feimage-doesnt-seem-to-work-in-firefox

标签

svg

svg-filters