Firefox中的SVG过滤器 [英] SVG Filters in Firefox

问题描述

由于某种原因，我无法让我的SVG过滤器在Firefox中工作。不过，他们在歌剧院工作正常。我设置为过滤器的属性的元素就会消失。这是非常奇怪的。

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.

这是我的JavaScript代码：

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

推荐答案

保罗·爱尔兰语作了演示，将 SVG过滤器应用于HTML 5视频。

的源代码现场演示显示如何在滤镜之间切换。在这种情况下，所有的SVG片段直接写入页面作为标签，而不是通过JavaScript动态插入。

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.

它可能有助于尝试使用直线上下文标签，然后切换到JavaScript一旦工作。可能有一些奇怪的实现（bug），它只在动态（/猜测）时表示自己。

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).

另外，它可能依赖于什么版本的Firefox重新使用。我不知道哪个版本开始支持SVG过滤器，但保罗的帖子似乎建议它可能需要每夜制作。

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.

祝你好运！

这篇关于Firefox中的SVG过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！