Mar*_*rkL 1 html javascript jquery svg
我试图仅在页面加载时或加载后创建SVG标签结构。
这个请求可能看起来很奇怪，但这是必需的，因为大多数html标记是由编译的创作软件应用程序生成的，因此我无法对其进行篡改。我只能根据需要“注入” JavaScript来创建其他资产（例如：Div）。
参见下面的标记。[为清晰起见，省略了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>
如果我手动将SVG标记放置在目标位置，则页面和SVG会正确呈现。如果我尝试动态创建标记，那么我将一无所获。
当我在页面加载后查看html源代码时，该功能应该已经为SVG创建了标记。
我试图通过一个<body onLoad="run()">事件来做，但它也不起作用。
注意：当我需要动态创建新的DIV时，此功能运行良好。
我究竟做错了什么？在此先感谢所有人。
您正在做的事情很好。svg夹中有一些小缺陷，可防止它出现。
xmlns="http://www.w3.org/2000/svg"）height属性缺少引号（height="100"）</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>SVG 的 javascript 有点不同，因为它们位于不同的命名空间中。在快速研究中，我无法确切地找到我在哪里学到的，但我确实找到了一个旧的 SO 问题，它确实显示了它是如何创建的。由于我没有亲自研究过，所以只能建议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);