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

时间:2010-10-07 03:21:16

标签: javascript svg raphael

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

5 个答案:

答案 0 :(得分:15)

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

答案 1 :(得分:11)

根据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中使用)。

答案 2 :(得分:5)

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

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

答案 3 :(得分:2)

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

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

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

答案 4 :(得分:0)

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

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

查看documentation