dom - 使用 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 通道）？

score 2 · Accepted Answer

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

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

- 编辑

我有机会尝试一下，但它不起作用，因为过滤器无法识别attr，但是如果您抓住节点并使用常规 DOMsetAttribute方法，它确实有效（在 Firefox 中）。

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

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

score 2 · Accepted Answer

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

2 回答 2