如何使用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图形？

回答

相关问题