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

我在尝试使用基于raphael blur插件的dropshadow.raphael.js插件（我尝试使用css过滤器插件，同一问题）时出现了一个奇怪的问题。Raphael dropshadow插件在svg路径上的Firefox和opera问题

我画一个贝塞尔路径并添加阴影效果：

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插件。

编辑

通过使用一个矩形的，而不是一条线，因为该元件需要具有高度应用滤波器（感谢罗伯特Longson）时修正：

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

Working fiddle.

来源

2013-04-12 soyuka

您应该向插件作者报告插件中的错误。似乎至少有2个。a）它使用相同的阴影ID创建多个过滤器。b）假设具有阴影的对象具有宽度或高度。最重要的是，您可以报告您*做*的事实，将webkit上的阴影视为未遵循SVG规范的webkit bug。 –

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

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

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

来源

2013-04-12 10:57:23

谢谢你，我同意，但我的路径有一个宽度不是吗？这是由jQuery编程设置的理由。我会尝试找到一种方法来设置这个路径的一些高度。 – soyuka

对，它没有高度这个问题。 –

[固定jsfiddle]（http://jsfiddle.net/CqFMj/5/）感谢您指出我在正确的方向！ – soyuka

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

回答

相关问题