使用 Raphael JS，用具有偏移量的背景图像填充 SVG 元素

我想要这个这个使用具有偏移量的背景图像填充 SVG 元素 https://stackoverflow.com/questions/5239458/fill-svg-element-with-with-a-background-image-with-an-offset，但是使用 Raphael JS。

显示带有背景图像的矩形without偏移很容易。

canvas.rect(
    positionx, positiony, width, height
).attr(
    {fill: "url('/content/image_set.gif')"}
);

上面的代码将仅显示图像的左上角。我想移动它并显示它的另一部分。我该怎么做？

我建议将图像与矩形分开绘制。如果您需要描边，您可以在图像后面绘制一个填充矩形，或者在顶部绘制带有描边但不填充的矩形。

图像是通过裁剪来绘制的，以剪掉你想要的部分，并且你可以通过以下方式控制图像的偏移：img.translate(x,y)或由paper.image params:

var img = paper.image("foo.png", 10, 10, 80, 80);
img.attr({ "clip-rect": "20,20,30,30" });

以上仅适用于矩形裁剪（svg 本身支持通过“剪辑路径”属性 http://www.w3.org/TR/SVG11/masking.html#ClipPathProperty）。如果您想要图案填充，那么您目前必须超越 raphaël 提供的范围。最简单的方法可能是扩展 raphaël 来做到这一点，并为不支持 svg 的浏览器提供一些其他后备。

SVG Web http://code.google.com/p/svgweb/如果您正在寻找可以作为旧浏览器的后备的东西，似乎至少部分支持 svg 模式。