Why the SVG is not rendered correctly?

Question

I have a little script, that creates a line digram. The output is a SVG that is added to a div element. The problem is that the SVG is not displayed. If i copy the SVG and paste it to JS Fiddle it is displayed correctly.

The index.html looks like this:

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

The output after the script is done:

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

And here the Fiddle:

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

Why the SVG is not displayed?

Answer 1

Ok, the problem was that I used the wrong createElement function. I used

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

but the correct way is

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

Why the SVG is not rendered correctly?

Question

1 answers

solution1
2 ACCPTED 2019-07-08 12:25:04

Why the SVG is not rendered correctly?

Question

1 answers

solution1 2 ACCPTED 2019-07-08 12:25:04

solution1
2 ACCPTED 2019-07-08 12:25:04