使用Raphaël-JavaScript库的字体阴影

Question

我想在任何给定的文字周围留一个阴影，或者使文字看起来更抗锯齿。

例如，假设我正在运行一个简单的文本，例如：

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

看起来那个大小的文字看起来有点粗糙，并且不能很好地融合背景。有没有办法可以创建阴影效果（理想情况下使用Alpha通道）？

Answer 1

在SVG中，文本阴影效果不像CSS3那么简单，但它相当简单using a filter。您不能像Raphaël那样使用该示例，因为它不支持组，但您可以在外部文件中创建过滤器定义，然后将其应用于：

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

- 修改

我有机会尝试一下，因为filter isn't recognised by attr它不起作用，但是如果你抓住节点并使用常规DOM setAttribute它会起作用（在Firefox中）方法

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

Chrome不会应用投影，而Opera会模糊整个元素。它几乎肯定不会在IE中工作，因为那将是VML。 Example here

Answer 2

我知道这是一个老问题，但为了帮助其他人搜索这个问题，你可以尝试使用Element.glow（[glow]）来获得阴影效果。 http://raphaeljs.com/reference.html#Element.glow