Raphael-GWT：図形（Rect）の塗りつぶし画像がオフセット表示されます。これを解決するには？

Question

{Shape}.attr("fill","url({image.path})")の動作が不思議です。

形状に塗りつぶし画像を適用する： - 私は、元の画像の境界をマーク

public class AppMapCanvas extends Raphael { 

    public AppMapCanvas(int width, int height) { 
     super(width, height); 
     this.hCenter = width/2; 
     this.vCenter = height/2; 
     ... 
     Rect rect = this.new Rect(hCenter, vCenter, 144, 40, 4); 
     rect.attr("fill", "url('../images/app-module-1-bg.png')"); // <-- 
     ... 
    } 
} 

背景画像は、このように、例示のスナップショットが封入されている（奇妙な位置を取得し、形状の背後にあるキャンバスaccross TEALに見えます赤で）。

これは（単なるpath.M(0,0)がsufficiantある）パスに沿ってアニメーションの存在自体を解決するように見えます。

最初に塗りつぶし画像を正しく配置するにはどうすればよいですか？

Answer 1

私が理解できることからこれを行う適切な方法は、SVGパターン宣言を使用して、使用したい画像の部分と位置を指定することです。次に、そのパターンを使用して矩形要素を塗りつぶします。残念ながら、Raphaelのjavascriptライブラリはパターンをサポートしていないため、画像を使用して長方形を塗りつぶす直接的な方法はありません。