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

Question

我想要这个 Fill SVG element with with a background-image with an offset , 但使用 Raphael JS。

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

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

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

Answer 1

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

图像是用裁剪绘制的，可以裁剪掉你想要的部分，你可以通过 img.translate(x,y) 或 paper 来控制图像的偏移量.image 参数:

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

以上仅适用于矩形裁剪(svg 本身支持通过 'clip-path' property 进行任意裁剪)。如果你想要图案填充，那么你目前必须跳出 raphaël 提供的范围。最简单的可能就是扩展 raphaël 来做到这一点，并为不支持 svg 的浏览器提供一些其他回退。

SVG Web如果您正在寻找可以作为旧浏览器后备的东西，它似乎至少部分支持 svg 模式。