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

Posted 2023-03-05

【中文标题】使用 Raphael JS，用带有偏移的背景图像填充 SVG 元素

【英文标题】：Using Raphael JS, fill an SVG element with with a background-image with an offset

【发布时间】：2011-07-19 16:49:57

【问题描述】：

我想要这个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')"
);

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

【参考方案1】：

以上clip-rect 仅适用于矩形 - 如果您需要为path 设置背景位置偏移量，有一个相对简单的方法：

Make the fill position relative to the shape（否则事情会变得一团糟） 在路径字符串的开头添加一个额外的M 段，其中只有两个坐标。这会更改被视为路径原点的点，从而更改图像开始的位置。

假设您有一个定义为M0,0 50,0 25,35Z 的三角形路径。如果要将背景图像向左偏移 20px 并向上偏移 5px，请将M-20,-5 附加到字符串的开头，给出M-20,-5 M0,0 50,0 25,35Z。

这里有一个演示：

http://jsbin.com/oxuyeq/14/edit

请注意，实际的背景偏移量将是您输入的值与应用填充时路径左上边界框之间的差异。如果在定义原始路径时可以确定这是0,0，那么生活会更轻松。

---

如果您正在考虑定义一个动态应用背景位置的函数或自定义属性 - 例如，使用element.getBBox() 来解决上述问题 - 请注意其中存在错误VML 模式，这意味着在 IE8 中，如果您使用 .attr('path') 更新路径，则任何额外的 M 段都会从路径中清除。

另外，在 SVG 模式下，您需要刷新填充，这可能意味着您需要重新申请 the relative position fix。

这是一个自定义属性的演示，适用于除 IE8 之外的所有内容 - 单击形状以更新背景位置 - 尝试使其在 IE8 中工作失败...http://jsbin.com/oxuyeq/13/edit

【参考方案2】：

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

图像是通过裁剪绘制的，可以裁剪出你想要的部分，你可以通过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 模式，如果您正在寻找可以作为旧浏览器后备的东西。

【讨论】：

图片确实比矩形更有意义。我正在尝试使用“clip-rect”属性，但我很难让它工作。这4个数字到底是什么？我在互联网上找不到任何文档。 :S 我想无论如何我都必须选择“剪辑路径”...

只是为了记录它，“clip-rect”参数是 X、Y、宽度和高度。

确实，我花了一些时间才意识到“clip-rect”是 Raphael 的东西，它在下面使用了 SVG 的“clip-path”。如您所见，我是 SVG 的新手。 :S