以編程方式在HTML5 SVG中添加位圖圖像

我有一個使用SVG的繪圖畫布的Web應用程序。繪製塗鴉和書寫文字作品。現在我想能夠將位圖圖像添加到畫布。這根本不起作用。以編程方式在HTML5 SVG中添加位圖圖像

我試圖通過<image>標記將圖像添加到SVG。如果我編寫靜態HTML，就像您期望的那樣工作。不過，我只用HTML代碼創建SVG文檔，所有其他元素都是通過JavaScript動態創建的。雖然這適用於路徑和文本元素，但它似乎不適用於圖像。我想知道爲什麼。

我創建了一個JSFiddle來演示問題：http://jsfiddle.net/cc4PH/1/。正如您在開發人員工具中看到的那樣，靜態和動態情況下的代碼是相同的。但只有在靜態情況下才會顯示圖像。這不是特定於瀏覽器的問題。我可以用Chrome，Firefox，Safari和Opera重現它。

我必須以某種方式告訴SVG加載圖像嗎？

在此先感謝！

來源

2013-07-26 j0ker

[用JavaScript編程創建SVG圖像元素]的可能重複（http://stackoverflow.com/questions/6701705/programmatically-creating-an-svg-image-element-with-javascript） – fatsmcgee

看起來問題在於xlink:href屬性。似乎需要使用setAttributeNS()，因爲動態創建的圖像不知道從svg元素獲取對xlink名稱空間的引用。解決方法是如下：

var $img = $(document.createElementNS('http://www.w3.org/2000/svg', 'image')).attr({width: 200, height: 200}); 
$img.get(0).setAttributeNS('http://www.w3.org/1999/xlink', 'href', url);

http://jsfiddle.net/cc4PH/6/

有趣的是，這也意味着，xmlns:xlink屬性是不在創建svg元件的需要，如果鏈接的圖像將僅被動態地添加，作爲如下所示：http://jsfiddle.net/cc4PH/8/

來源

2013-07-26 18:28:47 JAB

非常有幫助，謝謝！ – j0ker

@ j0ker不客氣。 – JAB

是的，如果你只是想顯示svg，你不需要root上的'xmlns：xlink'屬性。但是，如果要序列化svg（用於複製粘貼或外部編輯），那麼最有可能需要它（以及'href'屬性中的相應'xlink：'前綴）。 –

以編程方式在HTML5 SVG中添加位圖圖像

回答

相關問題