Raphael-GWT：填充图像的形状（矩形）出现偏移。如何解决这个问题？

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

背景图像似乎在形状后面的画布上出现了青色，因此位置变得奇怪（附上插图快照 - 我将原始图像边框标记为红色）。

这似乎在沿路径存在动画时自行解决（仅path.M(0,0) 就足够了）。

首先如何正确定位填充图像？

Answer 1

据我所知，执行此操作的正确方法是使用 SVG 模式声明来指定您要使用的图像的部分和位置。然后您将使用该模式来填充矩形元素。不幸的是，Raphael javascript 库不支持模式......所以没有直接的方法来使用图像来填充矩形。