我想要这个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')"}
);
上面的代码只会显示图像的左上角。我想转移它并显示它的另一部分。我该怎么办？
答案 0 :(得分：14)
我建议将图像与rect分开绘制。如果你需要笔画，你可以在图像后面绘制一个填充的矩形，或者在笔画上面绘制矩形，而不是填充。
使用剪裁绘制图像以剪切出您想要的部分，您可以使用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模式，如果你正在寻找一些可以作为旧浏览器后备的东西。
答案 1 :(得分：0)
以上clip-rect仅适用于矩形 - 如果您需要为path设置背景位置偏移，则有一种相对简单的方法：
M段。这会改变被视为路径起点的点，从而改变图像开始的位置。所以想象你有一个定义为M0,0 50,0 25,35Z的三角形路径。如果要将背景图像偏移20px并向上偏移5px，请将M-20,-5附加到字符串的开头，然后显示M-20,-5 M0,0 50,0 25,35Z。
这是一个完全相同的演示：
请注意，实际背景偏移量将是您输入的值与应用填充时路径的左上边界框之间的差异。如果您可以确定在定义原始路径时0,0，那么生活会更容易。
如果您正在考虑定义动态应用背景位置的功能或自定义属性 - 例如，使用element.getBBox()来抵消上述问题 - 请注意有一个VML模式中的错误，这意味着在IE8中，如果使用.attr('path')更新路径，则会从路径中删除任何其他M段。
此外，在SVG模式下，您需要刷新填充，这可能意味着您需要重新应用the relative position fix。
这是一个自定义属性的演示，除了IE8之外的所有内容都适用于上述 - 单击形状以更新背景位置 - 尝试使其在IE8中运行失败... http://jsbin.com/oxuyeq/13/edit