使用feImage的SVG feBlends在Firefox中似乎不起作用 [英] SVG feBlends using feImage doesn't seem to work in Firefox

问题描述

因此，我使用SVG混合功能复制了新的iOS7照片应用程序图标，并在IE10，Chrome 27和Safari 6中看起来不错，但在Firefox中根本不显示.我是否缺少明显的XML咒语? (此外-此代码似乎非常冗长-如果对缩略列表有任何建议，那将是很棒的).

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>

推荐答案

在Firefox中，feImage目前仅用于完整图像，而不用于文档片段.请参见错误455986

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

这篇关于使用feImage的SVG feBlends在Firefox中似乎不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！