如何向 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 支持。他使用 元素和 feGaussianBlur 滤镜效果。 WebKit 已经实现了 feGaussianBlur 效果，但是滤镜不稳定并且在 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 }) // 随机示例...

查看 文档