SVG Filters in Firefox

Question

For some reason I can't get my SVG filters to work in Firefox. They work fine in Opera, however. The element whose property I set to the filter on just disappears. It's very odd.

Here's my javascript code:

defsElement = SVGDoc.createElement("defs");
var filterElement = SVGDoc.createElement("filter");
filterElement.setAttribute( "id", "cm-mat");
filterElement.setAttribute( "filterUnits", "objectBoundingBox");

var fecolormatrixElement = SVGDoc.createElement("feColorMatrix");
fecolormatrixElement.setAttribute("type", "matrix");
fecolormatrixElement.setAttribute("in", "SourceGraphic");
fecolormatrixElement.setAttributeNS(null, "values", "1 1 1 1 1  2 2 2 2 1  1 1 1 1 1  1 1 1 1 1");
filterElement.appendChild(fecolormatrixElement);
defsElement.appendChild(filterElement);
SVGDoc.documentElement.insertBefore(defsElement, SVGDoc.documentElement.childNodes.item(1));

partRef = getElementFromID(SVGDoc.documentElement, part);
if(partRef != null)
{
    partRef.style.setProperty('filter', 'url(#cm-mat)', null);
}

Any Thoughts? Thanks

Answer 1

Paul Irish made a demo applying SVG Filters to HTML 5 video.

The source code for the live demo shows how to switch between filters. In that case, all the SVG pieces are written directly into the page as tags, not inserted dynamically via JavaScript.

It might help to try and get it working using straight up tags, then switch over to JavaScript once it's working. There may be some strange oddity of the implementation (bug) which only expresses itself when created dynamically (/speculation).

Also, it may depend no what version of Firefox you're using. I'm not sure which version started supporting SVG filters, but Paul's post seems to suggest it may require a nightly build.

Good luck!