Raphael dropshaws插件firefox和歌剧问题在svg路径上

我在尝试基于raphael blur插件的dropshadow.raphael.js插件时遇到了一个奇怪的问题(我尝试使用cssfilter插件,同样的问题)。

我正在画一条Bezier路径并添加了这些阴影:

var borderBottomRounded = paper.path("M150,100C20,200,600,200,400,100"); borderBottomRounded.attr({'stroke':'#000000', 'stroke-width':'1'}); borderBottomRounded.dropShadow(1,0,1,0.5); // dropShadow(size, offsetX, offsetY, opacity = 1) 

在那里,影子在每个浏览器上运行正常(还没有尝试IE)。

比我画一条直线,像这样的阴影:

 var borderBottom = paper.path("M 0,100 L800, 100"); borderBottom.attr({'stroke':'#000000', 'stroke-width':'1'}); borderBottom.dropShadow(1,0,1,0.5); 

$content是我的raphael paper因为我希望它能占据整个宽度。 我无法将viewport用于我正在做的事情。

但是这条路径在Firefox或Opera上消失了 (使用webkit浏览器很好)。

我该如何解决这个问题? 目前,我只是为Firefox和Opera禁用了这一行的影子,但我正试图找到一种更好的方法来做到这一点……

查看关于小提琴的实例 。

另一个尝试使用cssfilter插件 。

包括jQuery 1.9.1,Raphael 2.1.0和raphael dropshadowin插件。

编辑

通过使用rect而不是行来修复,因为在应用filter时元素需要具有高度(感谢Robert Longson):

 var borderBottom = paper.path("M 0,100 H800 v1 H0 Z"); borderBottom.attr({'fill':'#000000', 'stroke-width':'0'}); 

工作小提琴。

按照http://www.w3.org/TR/SVG/coords.html#ObjectBoundingBox

当适用元素的几何体没有宽度或没有高度时,不应使用关键字objectBoundingBox,例如水平线或垂直线的情况,即使由于具有非零笔划宽度而在查看时线具有实际厚度时也是如此对于边界框计算,忽略笔划宽度。 当适用元素的几何体没有宽度或高度且指定了objectBoundingBox时,将忽略给定的效果(例如,渐变或滤镜)。

filterUnits的默认值是objectBoundingBox。 所以Opera和Firefox都没有显示filter,任何这样做的UA都没有正确遵循SVG规范。