使用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。您不能使用這個例子作爲是拉斐爾，因爲它有團體的支持，但你也許可以在一個外部文件來創建過濾器定義，然後用應用它：

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

--edit

我有機會嘗試一下，因爲filter isn't recognised by 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。 Example here。

Answer 2

我知道這是一個老問題，但爲了幫助其他人尋找這個，你可以嘗試Element.glow（[glow]）來獲得陰影效果。 http://raphaeljs.com/reference.html#Element.glow