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 холста позади формы, таким образом, получает странное позиционирование (иллюстрация снимок прилагается - я отмечены оригинальные границы изображения в красном).

Это, кажется, разрешится в присутствии анимации вдоль пути (просто path.M(0,0) является sufficiant).

Как я могу правильно разместить заполняющее изображение в первую очередь?

Answer 1

Правильный способ сделать это из того, что я могу понять, это использовать объявление шаблона SVG для указания части и положения изображения, которое вы хотели бы использовать. Затем вы должны использовать этот шаблон для заполнения элемента прямоугольника. К сожалению, в JavaScript-библиотеке Raphael нет поддержки шаблонов ... поэтому нет прямого способа использовать изображение для заполнения прямоугольника.