火狐浏览器中的SVG滤镜

Question

由于某些原因，我无法在Firefox中使用SVG滤镜。然而，在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);
}

有什么想法吗？ 谢谢。

- Nick

Answer 1

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

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

先尝试使用标签让它正常工作，然后再切换到 JavaScript。可能会有一些实现上的奇怪异常（错误），只有在动态创建时才表现出来（猜测）。

另外，它可能取决于您使用的 Firefox 版本。我不确定哪个版本开始支持 SVG 滤镜，但 Paul 的帖子似乎暗示它可能需要夜间版本。

祝你好运！

- jimbo

Answer 2

在我看来，这个颜色矩阵应该将每种颜色的每个组件都完全打开，使元素完全变为白色。

（如果您发布了显示问题的完整示例的URL而不仅仅是JavaScript片段，其他人可能更容易弄清楚。这将允许其他人测试有关为什么出错的理论。）

- David Baron

---

如果应用了过滤器，结果应该完全是白色。我很想听听 Opera 在你的原始示例中做了什么（我的猜测是元素在错误的命名空间中，因为您使用 createElement 而不是 createElementNS）。与上述片段的非脚本等效项显示 Opera 和 Firefox 的行为相同（白色输出）。 - Erik Dahlström

是的，抱歉，我在调整数值时忘记重置它们了。我尝试了一些截然不同的值，但没有任何改变。我放弃了使用JavaScript动态添加SVG元素，改为手动添加它们。现在它可以工作了，谢谢。 - Nick

Answer 3

这可能与Firefox Bug #308590相关。简单来说，当您的SVG从data-URL加载或文档中有<base>标签时，Firefox无法解析筛选器URL。

在您的示例中，Firefox在嵌入的文档之外的某个地方查找url（# cm-mat）。不幸的是，它只是最近被修复了，在我的情况下，我没有找到任何解决方法，除非去掉base标签。

- Marcel Anacker

---

谢谢，你的评论让我免去了一些麻烦。我在我的CSS中将SVG颜色矩阵指定为数据URL，在Firefox 11中可以工作，但是我的客户无法使用Firefox 4.0.1看到它（！！！）。他只能看到白色而不是图像。我尝试删除我的<base>标签，但没有任何效果。将代码移动到外部svg文件中解决了问题。我使用Firefox 4.0.1进行了测试，以确保它可以正常工作，并警告客户需要升级以保证在线安全。 :) - alexg

Answer 4

你的页面需要作为 XML 提供。

- Henry