Как добавить тени к объектам Raphael.js?

Я хотел бы узнать, как добавить размытые красные тени к объектам/путям Raphael.js. Насколько я знаю, в библиотеке это невозможно, но есть ли работа вокруг?

Ответ 1

Добавление ссылки на Raphael.blur в отдельном ответе на запрос OP.

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);

Обратите внимание, что в комментариях Дмитрия он упоминает, что нет поддержки WebKit. Он использует элемент <filter> и эффект фильтра feGaussianBlur. WebKit реализовал эффект feGaussianBlur, но фильтры неустойчивые и отключены в Safari (он может работать в Chrome 5 - обязательно должен работать в Chrome 6).

Ответ 2

Вы можете использовать Element.glow([glow]), чтобы получить эффект тени. http://raphaeljs.com/reference.html#Element.glow

Ответ 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);

Вы также можете настроить атрибут непрозрачности, если это необходимо.

Ответ 5

Вы можете использовать свечение, чтобы добавить тени.

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

просмотрите документацию