1

特定のテキストの周りに影を付けたり、テキストをよりアンチエイリアス処理したりしたいと思います。

たとえば、次のような単純なテキストを実行しているとします。

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

このサイズのテキストはやや分厚く、背景とうまく調和しません。ドロップ シャドウ効果を作成する方法はありますか (理想的にはアルファ チャネルを使用)。

4

2 に答える 2

2

これは古い質問であることは知っていますが、これを探している他の人を助けるために、 Element.glow([glow]) を試して影の効果を得ることができます。http://raphaeljs.com/reference.html#Element.glow

于 2012-04-27T00:37:28.220 に答える
2

SVG では、テキストの影の効果は CSS3 ほど単純ではありませんが、フィルターを使用するとかなり簡単です。グループをサポートしていないため、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 であるため、ほぼ確実に IE では機能しません。 例はこちら。

于 2010-09-04T20:26:50.883 に答える