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

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

• javascript
• firefox
• dom
• svg
• svg-filters

Share Improve this question Follow edited Oct 10, 2012 at 4:27 Michael Mullany 31.9k66 gold badges8484 silver badges107107 bronze badges asked May 17, 2010 at 19:24 NickNick 71599 silver badges2323 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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!

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

(It also might be easier for other people to figure out if you posted the URL of a plete 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.)

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.

your page needs to be served as xml.