Javascript 为什么SVG不能正确呈现？_Javascript_Html_Svg

Javascript 为什么SVG不能正确呈现？

javascript html svg

Javascript 为什么SVG不能正确呈现？,javascript,html,svg,Javascript,Html,Svg,我有一个小脚本，它创建了一个行digram。输出是添加到div元素的SVG。问题是SVG没有显示。如果我复制SVG并将其粘贴到JS FIDLE，它将正确显示 index.html如下所示： <!DOCTYPE html> <html> <head> <style> body { margin: 0; padding: 0; font-family: sa

我有一个小脚本，它创建了一个行digram。输出是添加到div元素的SVG。问题是SVG没有显示。如果我复制SVG并将其粘贴到JS FIDLE，它将正确显示

index.html如下所示：

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: sans-serif;
            font-size: 14px;
            height: 100vH;
        }
    </style>
</head>

<body>
    <div id="app" style="position:absolute;left:50px;width:500px;height:300px;"></div>
    <script src="app.bundle.js"></script>
    <script>
        let a = new LiveLineAnno.default(
            document.getElementById("app"),
            [
                { x: 0, y: 0 },
                { x: 5, y: 40 },
                { x: 20, y: 30 },
                { x: 30, y: 80 },
                { x: 100, y: 0 }
            ]
        );
    </script>
</body>
</html>


身体{
保证金：0；
填充：0；
字体系列：无衬线；
字体大小：14px；
高度：100vH；
}
设a=new LiveLineAnno.default(
document.getElementById（“应用程序”），
[
{x:0，y:0}，
{x:5，y:40}，
{x:20，y:30}，
{x:30，y:80}，
{x:100，y:0}
]
);

脚本完成后的输出：

<div id="app" style="position:absolute;left:50px;width:500px;height:300px;">
<div style="width: 100%; height: 100%; position: relative;"><svg width="500" height="300"
        style="fill: none; stroke: rgb(170, 221, 255); width: 500px; height: 300px; stroke-width: 2px; display: block; border-left: 1px solid black; border-bottom: 1px solid black;">
        <path d="M0 300 L25 150 L100 187.5 L150 0 L500 300"></path>
    </svg>
    <div
        style="position: absolute; bottom: -40px; height: 40px; left: 0px; right: 0px; display: flex; justify-content: space-between;">
        <div data-value="0">0</div>
        <div data-value="25">25</div>
        <div data-value="50">50</div>
        <div data-value="75">75</div>
        <div data-value="100">100</div>
    </div>
    <div
        style="position: absolute; top: 0px; left: -40px; width: 40px; bottom: 0px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;">
        <div data-value="80">80</div>
        <div data-value="60">60</div>
        <div data-value="40">40</div>
        <div data-value="20">20</div>
        <div data-value="0">0</div>
    </div>
</div>

这里是小提琴：

0255075100806040200

好的，问题是我使用了错误的createElement函数。我曾经

但正确的方法是

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

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