Firefox中的SVG过滤器

由于某些原因，我无法让我的SVG过滤器在Firefox中工作。但是，他们在Opera中运行良好。我设置为过滤器的属性就消失了。这很奇怪。Firefox中的SVG过滤器

这里是我的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); 
}

有什么想法？谢谢

来源

2010-05-17 Nick

Paul Irish作出演示申请SVG Filters to HTML 5 video。

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

它可能有助于尝试使用直线标记工作，然后在其工作后切换到JavaScript。动态创建（/推测）时，可能会有一些奇怪的实现（bug），它们只表达自己。

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

祝你好运！

来源

2010-05-17 21:19:57 jimbojw

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

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

来源

2010-05-17 21:45:49

是的，如果应用过滤器，结果应该是全白的。我很想知道更多关于Opera在原始示例中做了什么（我的猜测是错误名称空间中的元素，因为您使用createElement而不是createElementNS）。上面代码片段的非脚本化等价物显示了Opera和Firefox的行为相同（白色输出）。 – 2010-05-18 06:36:51

对不起，我正在旋转数值并忘记重置它们。我尝试了一些截然不同的值，但没有任何变化。我只是放弃了动态添加JavaScript的svg元素，并手动添加它们。它现在有效，谢谢。 – Nick 2010-05-18 15:33:07

您的页面需要作为xml服务。

来源

2010-09-12 11:20:11 Henry

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

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

来源

2011-06-14 15:19:33

谢谢，您的评论让我免于麻烦。我在我的CSS中将我的SVG颜色矩阵thingy指定为数据网址，并在Firefox 11中工作，但后来我的客户端无法使用Firefox 4.0.1（!!!）查看它。他只能看到白色而不是图像。我试图删除我的标签，它什么也没做。将代码移至外部svg可解决问题。我使用Firefox 4.0.1进行了测试，以确保它可以正常工作，并警告客户他需要升级到安全的在线状态。 :) – alexg 2012-09-21 11:53:35

Firefox中的SVG过滤器

回答

相关问题