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

Question

我希望这个这个Fill SVG元素带有带偏移的背景图像,但是使用Raphael JS.

使用没有偏移的背景图像显示矩形很容易.

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

上面的代码只显示图像的左上角.我想转移它并显示它的另一部分.我该怎么做？

Answer 1

我建议将图像与rect分开绘制.如果你需要笔画,你可以在图像后面绘制一个填充的矩形,或者在笔画上面绘制矩形,而不是填充.

图像绘制剪报夹出你想要的部分,你可以控制图像与任何的偏移img.translate(x,y)或由paper.imagePARAMS:

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

以上内容仅适用于矩形剪辑(svg本身通过'clip-path'属性支持任意剪辑).如果你想要一个图案填充,那么你现在必须超出raphaël提供的范围.最简单的可能只是扩展raphaël来做到这一点,并为不支持svg的浏览器提供一些其他回退.

SVG Web似乎至少部分支持svg模式,如果你正在寻找一些东西作为旧浏览器的后备.