如何使用javascript或jquery动态添加SVG图形？_Javascript_Jquery_Html_Svg

如何使用javascript或jquery动态添加SVG图形？

javascript jquery html svg

如何使用javascript或jquery动态添加SVG图形？,javascript,jquery,html,svg,Javascript,Jquery,Html,Svg,我试图仅在页面加载时或加载后创建SVG标记结构这个请求可能看起来很奇怪，但这是必需的，因为大多数html标记都是由编译的创作软件应用程序生成的，所以我不能篡改它。我只能根据需要“注入”javascript来创建其他资产（例如：div）请参见下面的标记。[为了清晰起见，省略了html标记的部分内容。] <html> .... <script> function run() { var newSvg = document.getElementById('myDiv');

我试图仅在页面加载时或加载后创建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>


....
函数运行（）{
var newSvg=document.getElementById（'myDiv'）；
newSvg.outerHTML+=''；
}
....
....
run（）；

如果手动将SVG标记放置在目标位置，页面和SVG将正确呈现。如果我尝试动态创建标记，我将一无所获

当我在页面加载后查看html源代码时，没有SVG的标记，该标记本应由函数创建

我曾尝试通过

事件执行此操作，但也不起作用

注意：当我需要动态创建一个新的DIV时，这个函数工作得很好

我做错了什么？提前感谢大家

SVG的javascript有点不同，因为它们位于不同的名称空间中。在快速的研究中，我找不到确切的地方我学到了这一点，但我确实找到了一个例子，它确实显示了它是如何产生的，有点不同。因为我没有亲自研究过它，所以我只能建议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);

svg尺寸（100 x 100）小于圆的位置

$（文档）.ready（函数（）{
$（'#myDiv'）。附加（''）；
});
你所做的一切都很好。svg中存在一些小缺陷，阻止它出现
正如t1nr2y所指出的，使用propper名称空间
（xmlns=”http://www.w3.org/2000/svg“
）
svg的height
属性缺少引号（height=“100”
）
svg元素未关闭（缺少
）
您的圆远远超出视口（width=“100”height=“100”
但cx=“400”cy=“400”
）

var newSvg=document.getElementById（'myDiv'）；
newSvg.outerHTML+=''

var newSvg=document.getElementById（'myDiv'）；
newSvg.innerHTML+=`；
这适用于所有浏览器。感谢您的反馈。我做了你提到的所有更正，甚至使用了你的代码，但它仍然没有呈现。我认为t1nr2y可能是对的。我会从这个角度研究。谢谢你的反馈。我做了你和霍尔格将提到的所有更正，甚至使用了你的代码，但它仍然没有呈现。我认为t1nr2y可能是对的。我会从这个角度研究。谢谢你的反馈。我会研究这个角度。@MarkL不客气。我决定再次在w3网站上查看更多信息，我发现了这个，希望它能有所帮助！我试试看。我做了一些思考，感觉虽然名称空间问题存在，但我现在倾向于与时间相关的问题。对（newSvg.outerHTML+=“…string…”的调用只是在html标记（mydiv）后面加上一个字符串（mySVG标记）。它至少应该出现在我呈现页面的源代码中。但事实并非如此。这就是为什么我认为它与时间有关。为了验证我的理论，我在（newSvg.outerHTML+=）调用之前放置了一个警报，现在我正确地呈现了SVG。@MarkL，时间问题是有意义的，我试图找出其他答案在代码片段中是如何工作的，而不是你的答案。我会研究一下SVG的时序，如果我发现有用的话，请告诉您，谢谢。这些页面上的行为似乎已经正常化，甚至时间问题似乎也消失了[不确定为什么；也许我们的服务器今天响应速度更快…]我刚刚用更多信息编辑了我的答案，请查看这是否适用于您。您正在哪个浏览器上尝试此操作？Safari和IE不支持使用outerHTML创建SVG内容。它是在IE（项目需求）上创建的，但我很遗憾它现在不能在Firefox上运行。我（我想）是在做IE的。我希望它能在IE和FF上工作。谢谢你的提醒。我在FF上工作了。我忘了包含xmlns=“”，以使用正确的名称空间。IE 11现在似乎不在乎。
var newSvg = document.getElementById('myDiv');
newSvg.innerHTML += ``;