使用feImage的SVG feBlends不';在Firefox中似乎不起作用

使用feImage的SVG feBlends不';在Firefox中似乎不起作用,svg,svg-filters,Svg,Svg Filters,因此,我使用SVG混合复制了新的iOS7照片应用程序图标,得到了一些在IE10、Chrome 27和Safari 6中看起来不错,但在Firefox中根本不显示的东西。我是否遗漏了一个明显的XML咒语?(还有——这段代码似乎非常冗长——如果有任何建议删去这个列表,那就太好了) 在Firefox中,feImage目前只针对完整图像而不是文档片段实施。看 <svg width="500px" height="1000px" viewBox="0 0 500 1000" xmlns:xlink=

因此,我使用SVG混合复制了新的iOS7照片应用程序图标,得到了一些在IE10、Chrome 27和Safari 6中看起来不错,但在Firefox中根本不显示的东西。我是否遗漏了一个明显的XML咒语?(还有——这段代码似乎非常冗长——如果有任何建议删去这个列表,那就太好了)


在Firefox中,feImage目前只针对完整图像而不是文档片段实施。看

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