Firefox 中的 SVG 过滤器答案

【问题标题】：SVG Filters in FirefoxFirefox 中的 SVG 过滤器
【发布时间】：2011-02-20 13:54:52
【问题描述】：

由于某种原因，我的 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);
}

有什么想法吗？谢谢

【问题讨论】：

标签： javascript firefox dom svg svg-filters

【解决方案1】：

Paul Irish 做了一个应用SVG Filters to HTML 5 video 的演示。

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

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

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

祝你好运！

【讨论】：

【解决方案2】：

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

（如果您发布了显示问题的完整示例的 URL 而不仅仅是 javascript sn-p，其他人也可能更容易弄清楚；这将允许其他人测试关于为什么会出错的理论.)

【讨论】：

是的，如果应用了过滤器，结果应该是全白的。我很想听听更多关于 Opera 在您的原始示例中所做的事情（我的猜测是错误名称空间中的元素，因为您使用 createElement 而不是 createElementNS）。上述 sn-p 的非脚本等效项显示 Opera 和 Firefox 的行为相同（白色输出）。
是的，对不起，我搞砸了这些值，忘了重置它们。我尝试了一些完全不同的值，没有任何变化。我只是放弃了使用 javascript 动态添加 svg 元素并手动添加它们。现在可以了，谢谢。

【解决方案3】：

您的页面需要以 xml 格式提供。

【讨论】：

【解决方案4】：

这可能与Firefox Bug #308590 有关。简而言之，当您的 SVG 从数据 URL 加载或您的文档中有 -Tag 时，Firefox 无法解析过滤器 URL。

在您的示例中，Firefox 在嵌入文档之外的某个位置查找 url(#cm-mat)。不幸的是，它最近才得到修复，就我而言，我没有找到解决方法，而是以某种方式省略了 base-Tag。

【讨论】：

谢谢，您的评论让我免于麻烦。我在我的 CSS 中将我的 SVG 颜色矩阵指定为数据 URL，并且在 Firefox 11 中有效，但后来我的客户端使用 Firefox 4.0.1（！！！）看不到它。他只能看到白色而不是图像。我尝试删除我的标记，但它什么也没做。将代码移动到外部 svg 解决了这个问题。我使用 Firefox 4.0.1 进行了测试，以确保它可以正常工作，并警告客户他需要升级以确保在线安全。 :)