svg路径上的Raphael dropshadow插件firefox和opera问题

Question

我在尝试基于 raphael blur 插件的 dropshadow.raphael.js 插件时遇到了一个奇怪的问题（我尝试使用 css 过滤器插件，同样的问题）。

我正在绘制贝塞尔路径并添加阴影：

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 是我的拉斐尔paper，因为我希望它占据整个宽度。我不能使用viewport 来做我正在做的事情。

但这条路径在 Firefox 或 Opera 上会消失（与 webkit 浏览器配合使用非常好）。

我该如何解决这个问题？目前，我只是为 Firefox 和 Opera 禁用了这条线上的阴影，但我正在尝试找到一种更好的方法......

查看live example on fiddle。

再试一次css filter plugin。

包括 jQuery 1.9.1、Raphael 2.1.0 和 raphael dropshadow 插件。

编辑

通过使用矩形而不是线来修复，因为在应用过滤器时元素需要具有高度（感谢 Robert Longson）：

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

Working fiddle.

Answer 1

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

当适用元素的几何形状没有宽度或没有高度时，不应使用关键字 objectBoundingBox，例如水平或垂直线的情况，即使该线在查看时由于具有实际粗细非零笔划宽度，因为边界框计算忽略笔划宽度。当适用元素的几何图形没有宽度或高度并且指定了 objectBoundingBox 时，将忽略给定的效果（例如，渐变或过滤器）。

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