如何为Raphael.js对象添加阴影？ [英] How can one add drop shadows to Raphael.js objects?

问题描述

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

I would like to find out how to add blurry edged drop shadows to Raphael.js objects/paths. As far as I know it is not possible with the library as is but is there a work around?

推荐答案

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

Adding a link to Raphael.blur in a separate answer, per the OP's request.

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效果，但过滤器是不稳定并且在Safari中被禁用（可能是在Chrome 5中工作 - 肯定适用于Chrome 6）。

Note that in Dmitry's comments he mentions that there is no WebKit support. He uses the <filter> element and the feGaussianBlur filter effect. WebKit has implemented the feGaussianBlur effect, but filters are unstable and are disabled in Safari (it may work in Chrome 5 - should definitely work in Chrome 6).

这篇关于如何为Raphael.js对象添加阴影？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！