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')"); // <-- 
     ... 
    } 
} 

背景圖像似乎TEAL翻過形狀背後的畫布，從而會很奇怪定位（圖示快照被封閉 - I標記的原始圖像的邊界紅色的）。

這似乎解決本身在動畫中的存在沿着路徑（僅path.M(0,0)是sufficiant）。

如何正確定位填充圖像？

Answer 1

從我能理解的方式做到這一點的正確方法是使用SVG模式聲明來指定您想要使用的圖像的部分和位置。然後你會使用該模式來填充矩形元素。不幸的是，拉斐爾JavaScript庫不支持模式...所以沒有直接的方式來使用圖像來填充矩形。