Question

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

我正在绘制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禁用了这一行的影子，但我正试图找到一种更好的方法来实现这一目标......

查看live example on fiddle。

使用css filter plugin进行另一次尝试。

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

修改

通过使用rect而不是行来修复，因为在应用过滤器时元素需要有一个高度（感谢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规范。

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

1 个答案: