Question

我有一个小脚本，可以创建线图。输出是添加到div元素的SVG。问题是未显示SVG。如果我复制SVG并将其粘贴到JS Fiddle中，则会正确显示。

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>

脚本完成后的输出：

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

This is the output.

这里是小提琴：

<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></div>

为什么不显示SVG？

Answer 1

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

let svg = document.createElement("svg");

但正确的方法是

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

为什么SVG渲染不正确？

1 个答案: