Firefox中的SVG过滤器

Question

出于某种原因,我无法让我的SVG过滤器在Firefox中运行.但是,它们在Opera中运行良好.我设置为过滤器的属性刚刚消失的元素.这很奇怪.

这是我的javascript代码:

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);
}

有什么想法吗？谢谢

Answer 1

Paul Irish制作了一个将 SVG 滤镜应用于 HTML 5 视频的演示。

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

尝试使用直接标签使其工作可能会有所帮助，然后在工作后切换到 JavaScript。可能存在一些奇怪的实现（错误），只有在动态创建时才会表现出来（/推测）。

此外，这可能取决于您使用的 Firefox 版本。我不确定哪个版本开始支持 SVG 过滤器，但 Paul 的帖子似乎表明它可能需要每晚构建。

祝你好运！