javascript 如何为 Raphael.js 对象添加阴影？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3878436/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can one add drop shadows to Raphael.js objects?
提问by
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?
我想了解如何向 Raphael.js 对象/路径添加模糊边缘的阴影。据我所知，图书馆是不可能的，但有解决办法吗？
采纳答案by C-Mo
Adding a link to Raphael.blur in a separate answer, per the OP's request.
根据 OP 的要求，在单独的答案中添加指向 Raphael.blur 的链接。
http://github.com/DmitryBaranovskiy/raphael/blob/master/plugins/raphael.blur.js
http://github.com/DmitryBaranovskiy/raphael/blob/master/plugins/raphael.blur.js
Updated code sample:
更新的代码示例：
var shadow = canvas.path(p);
shadow.attr({stroke: "none", fill: "#555", translation: "4,4"});
shadow.blur(4);
var shape = canvas.path(p);
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 unstableand are disabled in Safari (it may work in Chrome 5 - should definitely work in Chrome 6).
请注意，在 Dmitry 的评论中，他提到没有 WebKit 支持。他使用<filter>元素和 feGaussianBlur 滤镜效果。WebKit 已经实现了 feGaussianBlur 效果，但是过滤器不稳定并且在 Safari 中被禁用（它可能在 Chrome 5 中工作 - 应该在 Chrome 6 中工作）。
回答by David Herse
You can use the Element.glow([glow])to get a shadow effect. http://raphaeljs.com/reference.html#Element.glow
您可以使用Element.glow([glow])来获得阴影效果。http://raphaeljs.com/reference.html#Element.glow
回答by dahoo
I wrote a plugin that adds a drop shadow to an element by applying an SVG filter to it. It's based on the blur plugin.
我编写了一个插件，通过向元素应用 SVG 过滤器为元素添加阴影。它基于模糊插件。
You can find it here: https://github.com/dahoo/raphael.dropshadow.js
你可以在这里找到它：https: //github.com/dahoo/raphael.dropshadow.js
回答by C-Mo
The easiest way to do it is simply to draw the object with a shadow-colored fill, offset by a few pixels, and then draw the actual object on top.
最简单的方法是简单地用阴影色填充绘制对象，偏移几个像素，然后在顶部绘制实际对象。
var shadow = canvas.path(p);
shadow.attr({stroke: "none", fill: "#555", translation: "4,4"});
var shape = canvas.path(p);
You can also adjust the opacity attribute if needed.
如果需要，您还可以调整不透明度属性。
回答by C-Mo
You can use a glow to add shadows.
您可以使用发光来添加阴影。
.glow({ color: '#900', width:10, offsetx:5 }) // random example...
.glow({ color: '#900', width:10, offsetx:5 }) // random example...
check out the documentation
查看文档
