如何向 Raphael.js 对象添加阴影？答案

【问题标题】：How can one add drop shadows to Raphael.js objects?如何向 Raphael.js 对象添加阴影？
【发布时间】：2014-03-15 00:18:12
【问题描述】：

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

【问题讨论】：

标签： javascript svg raphael

【解决方案1】：

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

【讨论】：

+1 对我有用。我正在使用 Raphael 和 jQuery 做一个通用的气泡小部件。这有帮助，谢谢。
谢谢你，没想到使用发光。辉光的默认值是黑色，不透明度为 0.5，这表明它旨在用于绘制阴影。
此答案中的链接现在无效。我认为您现在需要使用插件。

【解决方案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 的 cmets 中，他提到不支持 WebKit。他使用<filter> 元素和feGaussianBlur 滤镜效果。 WebKit 已经实现了 feGaussianBlur 效果，但是过滤器是unstable 并且在 Safari 中被禁用（它可能在 Chrome 5 中工作 - 在 Chrome 6 中肯定可以工作）。

【讨论】：

.blur 函数是否未记录？在 Raphael 文档的任何地方都找不到它。还是原生的？
这是一个拉斐尔插件。您可以在上面的链接中获取它并在 raphael.js 之后将其包含在您的页面中。
插件的 URL 似乎已损坏（出现 404），有人有工作链接吗？
code.google.com/p/webdesks/source/browse/trunk/…

【解决方案3】：

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

你可以在这里找到它：https://github.com/dahoo/raphael.dropshadow.js

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

但阴影色填充将具有实心边缘。我正在寻找从浅灰色到 0% alpha 的模糊边缘。你知道吗？
Raphael 确实有一个模糊插件。我从来没有用过，所以我不能保证，但它是由 Dmitry 写的，所以我们可以假设他知道自己在做什么 ;-) github.com/DmitryBaranovskiy/raphael/blob/master/plugins/…
哦，这很有趣。您应该将其作为答案提交，我会接受。如果您不这样做，那么我将在 3 天内亲自回答。谢谢。仍然应该将阴影编码到 Raphael 中以使其更简单。

【解决方案5】：

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

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

查看documentation

【讨论】：