如何設置SVG矩形元素的背景圖片？

Question

我使用keith-wood的jQuery SVG插件創建了一個SVG矩形。下面是代碼：

svg.graph._wrapper.rect(group, 0, 100, 40, 20, 
         {fill: 'ivory', 
         stroke: 'black', 
         strokeWidth : 2}); 

所以我想我可以很容易改變的，而不是使用「象牙」的填充，我改成了「theImageIwantToUse」。但它似乎並不奏效。

Answer 1

你可以在你的SVG插入圖片使用<image>元素http://www.w3.org/TR/SVG/struct.html#ImageElement

在您提到的插件中提供了適當的功能。

svg.image(parent, x, y, width, height, ref, settings) 

（http://keith-wood.name/svg.html）

我懷疑它可能用筆畫的圖像，所以你必須繪製圖像，以獲得您想要的確切的結果後得出，無填充矩形。

Answer 2

不能直接插入外部圖像作爲SVG對象的背景。

取而代之的是，你首先要創建這樣

var ptn = svg.pattern(defs, "imgPattern", 0, 0, 100, 100, 0, 0, 10, 10, 
         {patternUnits: "userSpaceOnUse"}); 
svg.image(ptn, 100, 50, 200, 200, "./theImageIwantToUse.png"); 

一個patttern和填充屬性使用這個模式，然後通過url()功能

svg.graph._wrapper.rect(group, 0, 100, 40, 20, 
         {fill: 'url(#imgPattern)', 
         stroke: 'black', 
         strokeWidth : 2});