使用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.image參數控制圖像的偏移：

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模式，如果你正在尋找一些東西作為舊瀏覽器的后備。

Answer 2

上面的clip-rect僅適用於矩形 - 如果需要為path設置背景位置偏移，則有一種相對簡單的方法：

所以想象你有一個三角形路徑定義為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模式下，您需要刷新填充，這可能意味着您需要重新應用相對位置修復。

這是一個自定義屬性的演示，除了IE8之外的所有內容都可以工作 - 點擊形狀來更新背景位置 - 有一些失敗的嘗試讓它在IE8中運行... http://jsbin.com/oxuyeq/13/edit