Question

我正在尝试仅在页面加载时或之后创建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时，此功能运行正常。

我做错了什么？在此先感谢所有人。

Answer 1

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);

Answer 2

你在做什么都很好。你的svg中有一些小瑕疵会阻止它出现。

如t1nr2y所指出的，使用propper命名空间（xmlns="http://www.w3.org/2000/svg"）
svg的height属性缺少引号（height="100"）
您的svg元素未关闭（缺少</svg>）
您的圈子远离视口（width="100" height="100"但cx="400" cy="400"）

＆＃13;

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>';

＆＃13;

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

＆＃13;

Answer 3

您的svg尺寸（100 x 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>

Answer 4

 var newSvg = document.getElementById('myDiv');
newSvg.innerHTML += ``;

这在所有浏览器上都很好。

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

4 个答案: