2

我在尝试基于 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 禁用这条线上的阴影，但我正在尝试找到一种更好的方法来做到这一点......

请参阅fiddle 上的实时示例。

再次尝试使用css 过滤器插件。

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

编辑

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

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

工作小提琴。

4

1 回答 1

3

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

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

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

于 2013-04-12T10:57:23.347 回答