Javascript 为拉斐和xEB制作动画；l、 js形状与背景图像

我正在尝试使用Raphaël.js为带有背景图像的矩形设置动画，请参见。虽然矩形大小已设置为60x60，并且图像大小绝对为60x60，但图像不适合矩形内部

对我来说，当我使用animate（）函数时，所有图像都完全适合矩形

为什么会发生这种情况？我如何解决这个问题

var r = Raphael('canvas', 500, 500);
r.canvas.style.backgroundColor = '#ccc';

var st = r.set();
st.push(
 r.rect(100,100,60,60),
 r.rect(180,100,60,60),
 r.rect(100,200,60,60)
);
st.attr({fill:"url(http://cdn2.image-tmart.com/prodimgs/1/13010995/Rose-Bouquet-of-Peach-Heart-Home-Decoration-Simulation-Red-Inside-Pink-Outside_3_60x60.jpg?1363942767)",  "stroke-width": 0});

st.animate({transform: "t200,100"}, 500);

---

在Raphael.js

Element.attr（{fill:'url（…）'）}）中

创建一个平铺的

来填充形状和文本。然而，Raphael.js的目标是兼容SVG和VML（受IE8支持），因此我认为它会做出一些妥协，比如自动调整

的位置。因此，当您翻译

时，

被反向翻译，因此它们在画布中看起来是固定的

使用

Paper.image（src，x，y，w，h）

很可能解决您的问题，并且具有相同的视觉行为。因为坐标不会被Raphael.js隐式更改。像这样：

var r = Raphael('canvas', 500, 500);
r.canvas.style.backgroundColor = '#ccc';

var st = r.set();
st.push(
    r.image(null, 100,100,60,60),
    r.image(null, 180,100,60,60),
    r.image(null, 100,200,60,60)
);

st.attr({src:"http://cdn2.image-tmart.com/prodimgs/1/13010995/Rose-Bouquet-of-Peach-Heart-Home-Decoration-Simulation-Red-Inside-Pink-Outside_3_60x60.jpg?1363942767"});

st.animate({transform: "t200,100"}, 500);

我还推荐Raphael.js，它与Raphael.js出自同一作者，但它仅适用于SVG，并且副作用较少