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!

Answer 2

That color matrix looks to me like it should to turn every component of every color to fully on, making the element completely white.

(It also might be easier for other people to figure out if you posted the URL of a complete example showing the problem rather than just a javascript snippet; that would allow other people to test theories as to why it's going wrong.)

Answer 3

This might be related to Firefox Bug #308590. In short Firefox fails to resolve filter URLs when your SVG is loaded from a data-URL or you got a <base>-Tag in your document.

In your example Firefox looks for url(#cm-mat) someplace outside your embedded document. Unfortunately it got fixed only recently and in my case I found no workaround, but to omit the base-Tag somehow.

Answer 4

your page needs to be served as xml.