Тени шрифта с использованием Raphaël - JavaScript Library

Question

Я хотел бы поместить тень вокруг любого данного текста или сделать текст более сглаженным.

Например, допустим, я запускаю простой текст, например:

var titleName = R.text(x+200, y-75, "Lorem Ipsoup de jour")
                 .attr({font: '75px Helvetica, Arial', opacity: 1, fill: "#dfe6ec"})

Текст такого размера выглядит довольно коротко и плохо сочетается с фоном.Есть ли способ создать эффект тени (с идеальным альфа-каналом)?

Answer 1

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

Answer 2

В SVG эффект тени текста не так прост, как в CSS3, но он достаточно прост с использованием фильтра . Вы не можете использовать этот пример, как в Raphaël, потому что он не поддерживает группы, но вы можете создать определение фильтра во внешнем файле и затем применить его с помощью:

.attr({filter: "url(filters.svg#dropShadow)"});

- редактировать

У меня была возможность попробовать, и он не работает, потому что фильтр не распознается attr, однако он работает (в Firefox), если вы захватываете узел и используйте обычный метод DOM setAttribute.

var t = paper.text(100, 100, "Raphaël\nkicks\nbutt!");
t.node.setAttribute("filter", "url('filters.svg#dropShadow')");

Chrome не применяет тень, и Opera размывает весь элемент. Это почти наверняка не будет работать в IE, потому что это будет VML. Пример здесь .