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

Question

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

Answer 1

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

Answer 2

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

http://github.com/DmitryBaranovskiy/raphael/blob/master/plugins/raphael.blur.js

更新了代码示例：

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效果，但过滤器为unstable并且在Safari中被禁用（它可能在Chrome 5中有效 - 应该可以在Chrome 6中使用）。

Answer 3

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

您可以在此处找到它：https://github.com/dahoo/raphael.dropshadow.js

Answer 4

最简单的方法是使用阴影色填充绘制对象，偏移几个像素，然后在顶部绘制实际对象。

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

如果需要，您还可以调整不透明度属性。

Answer 5

您可以使用发光添加阴影。

.glow({ color: '#900', width:10, offsetx:5 }) // random example...

查看documentation