gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 04:10:40 24 4
gpt4 key购买 nike

我试图仅在页面加载时或加载后创建 SVG 标签结构。

这个请求可能看起来很奇怪,但这是必需的,因为大部分 html 标记是由编译的创作软件应用程序生成的,所以我不能篡改它。我只能根据需要“注入(inject)”javascript 来创建额外的 Assets (例如:Divs)。

请参阅下面的标记。 [为清楚起见,省略了部分 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 中存在一些小缺陷,导致它无法显示。

  1. 正如 t1nr2y 指出的那样,使用正确的命名空间( xmlns="http://www.w3.org/2000/svg" )
  2. svg 的 height属性缺少引号 ( height="100" )
  3. 您的 svg 元素未关闭(缺少 </svg> )
  4. 你的圈子远远超出了你的视口(viewport)(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>

关于javascript - 如何使用 javascript 或 jquery 动态添加 SVG 图形?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32637811/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com