如何使用javascript或jquery動態添加SVG圖形？

我正在嘗試僅在頁面加載時或之後創建SVG標記結構。如何使用javascript或jquery動態添加SVG圖形？

這個請求可能看起來很奇怪，但這是必須的，因爲大多數的html標記都是由編譯的創作軟件應用程序生成的，所以我不能篡改它。我只能根據需要「注入」javascript來創建其他資產（例如：Div）。

請參閱下面的標記。如果我手動將SVG標記在目標位置，頁面和SVG渲染正確[HTML標記的部分已經爲清楚起見，省略]

<html> 
.... 
<script> 
function run() { 
var newSvg = document.getElementById('myDiv'); 
newSvg.outerHTML+='<svg style="position:absolute;z-index:10;margin:0;padding:0;top:0em;left:0.5em" onclick="go()" width="100" height=100><circle cx="400" cy="400" r="40" stroke="red" stroke-width="4" fill="blue" />'; 
} 
</script> 
<body> 
.... 
<div id="myDiv"></div> 
.... 
<script> 
run(); 
</script> 
</body> 
</html>

。如果我嘗試動態創建標記，我什麼也得不到。

當我在頁面加載後查看html源代碼時，沒有應該由函數創建的SVG標記。

我已經嘗試通過<body onLoad="run()">事件做，但它也不起作用。

注意：當我需要動態創建一個新的DIV時，此函數工作正常。

我在做什麼錯？在此先感謝所有人。

來源

2015-09-17 MarkL

我剛編輯我更多一些信息的回答，請看看是否適合您。 – t1nr2y

你在嘗試使用什麼瀏覽器？ Safari和IE不支持使用outerHTML創建SVG內容。 –

這是在IE（項目需求），但我很沮喪，它現在不適用於Firefox。我在IE上工作（我認爲）。我希望它能在IE和FF上工作。感謝提醒。 – MarkL

你在做什麼是完美的罰款。你的svg有一些小缺陷可以防止它出現。

作爲t1nr2y指出，使用propper命名空間（xmlns="http://www.w3.org/2000/svg"）
的SVG的height屬性缺失（height="100"）
您的SVG元素未關閉引號（缺少</svg>）
您圓是你的視口外的方式（width="100" height="100"，但是cx="400" cy="400"）

var newSvg = document.getElementById('myDiv'); 
 
newSvg.outerHTML += '<svg xmlns="http://www.w3.org/2000/svg" style="position:absolute;z-index:10;margin:0;padding:0;top:0em;left:0.5em" onclick="go()" width="100" height="100"><circle cx="40" cy="40" r="40" stroke="red" stroke-width="4" fill="blue" /></svg>';

<div id="myDiv"></div>

來源

2015-09-17 19:08:14

感謝您的反饋。我提出了所有你提到的更正，甚至使用了你的代碼，但它仍然沒有渲染。我認爲t1nr2y可能是對的。我會研究這個角度。 – MarkL

SVG的javascript有點不同，因爲它們在不同的命名空間中。在快速研究中，我找不到確切的位置，但我找到了old SO question這確實顯示了它的創建方式有點不同。由於我沒有親自研究過，所以我只能建議outerHTML函數不起作用，並且您必須找到等價的SVG命名空間。嘗試在w3.org網站上搜索關於此的更多信息。

編輯：經過深入研究，請嘗試創建您的SVG元素（而不是使用字符串）。

例如：

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); 
    svg.setAttribute("width", "640"); 
    ... 
    document.getElementById("div").appendChild(svg);

來源

2015-09-17 18:51:30 t1nr2y

感謝您的反饋。我會研究這個角度。 – MarkL

@MarkL歡迎您。我決定再次查看w3網站以獲得更多信息，並且我發現這個http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#JavaScript，希望它有幫助！ – t1nr2y

我會嘗試。我做了一些思考和感覺，雖然命名空間問題在那裏，但我現在依賴與時間有關的問題。（newSvg.outerHTML + ='... string ...'）的調用只是將一個html標籤（mydiv）與一個字符串（我的SVG標記）附加在一起。它至少應該出現在我的渲染頁面的源代碼中。但事實並非如此。這就是爲什麼我認爲它與時間有關。爲了測試我的理論，我在（newSvg.outerHTML + =）調用之前放置了一個警報，現在我正在獲取正確呈現的SVG。 – MarkL

你的SVG尺寸（100×100）比你圓的位置較小。

$(document).ready(function() { 
 
    $('#myDiv').append('<svg style="position:absolute;z-index:10;margin:0;padding:0;top:0em;left:0.5em" onclick="go()" width="100" height=100><circle cx="4" cy="4" r="4" stroke="red" stroke-width="4" fill="blue" /></svg>'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="myDiv"></div>

來源

2015-09-17 19:04:07

感謝您的反饋。我做了你和Holger將要提到的所有更正，甚至使用你的代碼，但它仍然沒有渲染。我認爲t1nr2y可能是對的。我會研究這個角度。 – MarkL

如何使用javascript或jquery動態添加SVG圖形？

回答

相關問題