feComposite code example from official site not working

Question

There's a code example demonstrating feComposite to be found here:

http://www.w3.org/TR/SVG/filters.html#feCompositeElement

But the example when run on at least FF and Chrome just prints the background triangles, without the foreground triangles blended in. I'm just learning SVG so am at a loss, though maybe it has something to do with XML namespaces and the filter="url(..." commands aren't actually accessing the filters (Just a guess though).

I distilled out a portion of the code that demonstrates the problem:

    <?xml version="1.0"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
              "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg width="330" height="195" viewBox="0 0 1100 650" version="1.1"
         xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
        <filter id="atopNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
          <feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="comp"/>
        </filter>
        <path id="Blue100" d="M 0 0 L 100 0 L 100 100 z" fill="#00ffff" />
        <path id="Red100" d="M 0 0 L 0 100 L 100 0 z" fill="#ff00ff" />
      </defs>

      <g  enable-background="new">
        <use xlink:href="#Blue100"/>
        <use xlink:href="#Red100" filter="url(#atopNoFlood)" />
      </g>
    </svg>

It should be generating but instead it just outputs (i.e. just the background triangle without the foreground triangle blended in via the filter.) Any help appreciated. Been looking at this for a while.

Answer 1

The example uses a BackgroundImage filter input that Firefox doesn't yet support.

Support for FillPaint and StrokePaint was added to Firefox nightlies a couple of days ago so work on filters in Firefox is continuing and apart from BackgroundImage/Alpha is pretty complete these days.