javascript - 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 Filters to HTML 5 video .

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

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

此外，这可能与您使用的 Firefox 版本无关。我不确定哪个版本开始支持 SVG 滤镜，但 Paul 的帖子似乎暗示它可能需要每晚构建。

祝你好运!