gpt4 book ai didi

javascript - 动态创建的 SVG 元素不显示

转载 作者:数据小太阳 更新时间:2023-10-29 05:49:59 25 4
gpt4 key购买 nike

我正在尝试使用纯 JavaScript 绘制一个 SVG 矩形。它没有显示。

但是当我在浏览器控制台中运行 document.getElementById('rect1') 时,矩形元素存在。当我将控制台中的 HTML 复制并粘贴到 HTML 文件中时,矩形会正确显示。所以看起来好像正确的代码被添加到文档中,但是元素没有被显示。

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<div>
<svg id="test" width="500" height="500">
<!-- code copied from browser console works
<rect x="30" y="60" width="50" height="80" style="stroke:#000000; fill:none;" id="rect1">
</rect> -->
</svg>

<svg id="main" width="500" height="500"></svg>
</div>
<script src="./src/shapes.js"></script>
</body>
</html>

JavaScript:

function addSvgElement() {
var rect = document.createElement("rect");
rect.setAttribute('x', 30);
rect.setAttribute('y', 60);
rect.setAttribute('width', 50);
rect.setAttribute('height', 80);
rect.setAttribute('style', "stroke:#000000; fill:none;");
rect.id = "rect1";
var svg = document.getElementById('main');
svg.appendChild(rect);
}

addSvgElement(); // adds correct code, but element doesn't show up

最佳答案

document.createElement("rect"); 将创建一个未知的 HTML DOM 元素。您必须使用正确的命名空间来创建 SVG DOM 元素。

var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");

关于javascript - 动态创建的 SVG 元素不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23588384/

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