如何为Raphael.js对象添加阴影？

Question

我想了解如何向Raphael.js对象/路径添加模糊边缘阴影.据我所知,这是不可能的图书馆,但有一个解决方法吗？

Answer 1

您可以使用它Element.glow([glow])来获得阴影效果.http://raphaeljs.com/reference.html#Element.glow

Answer 2

根据OP的请求,在单独的答案中添加指向Raphael.blur的链接.

更新的代码示例:

var shadow = canvas.path(p);
shadow.attr({stroke: "none", fill: "#555", translation: "4,4"});
shadow.blur(4);
var shape = canvas.path(p);

请注意,在Dmitry的评论中,他提到没有WebKit支持.他使用了<filter>元素和feGaussianBlur滤镜效果.WebKit已经实现了feGaussianBlur效果,但过滤器不稳定并且在Safari中被禁用(它可能在Chrome 5中有效 - 应该在Chrome 6中有效).

Answer 3

我写了一个插件,通过对它应用SVG过滤器为元素添加阴影.它基于模糊插件.