將圖片添加到SVG文件使用JavaScript和jQuery

我試圖將圖像添加到SVG文件.. 我想這個代碼::將圖片添加到SVG文件使用JavaScript和jQuery

drawImage : function(src, x, y, h, w) { 
     var img = document.createElementNS("http://www.w3.org/2000/svg", "image"); 
     var $img = $(img); 
     $img.attr('x', x); 
     $img.attr('y', y); 
     $img.attr('width', w); 
     $img.attr('height', h); 
     $img.attr('xlink:href', src); 
     $('g').append($img); 
    }

但圖像不會出現。當我選擇所有圖像..使用$('image')我找到了圖像，我可以選擇它，但仍然..它不可見。我試圖調查此問題，但沒有發現任何東西。我做錯了什麼？

來源

2012-04-19 zeacuss

我發現了一個jQuery插件，解決我的問題jQuery.svg

它有幾個方法繪製不同的形狀，包括圖像。

看來，它通過創建使用原生的JavaScript .. DOM節點添加圖像和它的作品

來源

2012-04-22 15:21:28 zeacuss

如何分配一個寬度和高度到$('g')，它是在您的代碼中持有$img？

來源

2012-04-19 20:19:55 TimDog

我還沒有嘗試過，但我懷疑這是問題，因爲我創造了其他元素（RECT，圓，路徑等），所有這些都畫在屏幕上，此外，我不認爲我可以有這種能力（改變寬度和高度g） – zeacuss 2012-04-19 20:28:55

我試過..但它沒有工作 – zeacuss 2012-04-19 20:31:13

可以使用setAttributeNS方法：

var img = document.createElementNS('http://www.w3.org/2000/svg','image'); 
img.setAttributeNS(null,'height','200'); 
img.setAttributeNS(null,'width','200'); 
img.setAttributeNS(null,'id','theID'); 
img.setAttributeNS('http://www.w3.org/1999/xlink','href','src'); 
img.setAttributeNS(null,'x','0'); 
img.setAttributeNS(null,'y','0'); 
$('#g').append(img);

來源

2012-04-19 20:31:51 undefined

它是一個簡單的功能..我不認爲我需要一個完整的庫來完成一項簡單的任務。當我評論第一個答案時，我創建了類似的函數來繪製（矩形，圓形，路徑，..等），他們工作得很好，他們看起來類似於這個，但我看不到它的問題 – zeacuss 2012-04-19 20:34:35

使用「setAttributeNS」也不起作用，它或者創建了這個元素這個元素''and它沒有顯示在屏幕上（chrome開發人員工具說它的位置在（0,0）!!） – zeacuss 2012-04-19 21:01:57

在setAttributeNS調用中，只有xlink一個是正確的，其他所有應該傳遞null作爲第一個參數。 – 2012-04-20 09:17:28

將圖片添加到SVG文件使用JavaScript和jQuery

回答

相關問題