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过滤器，但保罗的帖子似乎暗示它可能需要每晚构建。

祝你好运！

Answer 2

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

（其他人也可能更容易弄清楚你是否发布了一个显示问题的完整示例的网址，而不仅仅是一个javascript片段;这将允许其他人测试理论为什么会出错。）

Answer 3

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

在您的示例中，Firefox在嵌入式文档之外的某个位置查找url（＃cm-mat）。不幸的是它最近才得到修复，在我的情况下，我没有找到解决方法，但不知何故省略了base-Tag。

Answer 4

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

Firefox中的SVG过滤器

4 个答案: