Question

I would like to put a shadow around any given text, or make the text more anti-aliased looking.

For example lets say I’m running a simple text such as:

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

The text is somewhat chunky looking at that size, and doesn’t blend well against a background. Is there a way I can create a drop-shadow effect (with alpha channel, ideally)?

Answer 1

In SVG a text shadow effect isn’t as simple as with CSS3, but it’s reasonably straightforward using a filter. You can’t use that example as is in Raphaël because it has no support for groups, but you might be able to create the filter definition in an external file and then apply it with:

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

–edit

I’ve had a chance to give it a try and it doesn’t work because filter isn’t recognised by attr, however it does work (in Firefox) if you grab the node and use a regular DOM setAttribute method.

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

Chrome doesn’t apply the drop shadow, and Opera blurs the entire element. It almost certainly won’t work in IE because that’ll be VML. Example here.