title: Why the SVG is not rendered correctly?
body: <p>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.</p>
  
  <p>The index.html looks like this:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;style&gt;
          body {
              margin: 0;
              padding: 0;
              font-family: sans-serif;
              font-size: 14px;
              height: 100vH;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="app" style="position:absolute;left:50px;width:500px;height:300px;"&gt;&lt;/div&gt;
      &lt;script src="app.bundle.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          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 }
              ]
          );
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The output after the script is done:</p>
  
  <pre><code>&lt;div id="app" style="position:absolute;left:50px;width:500px;height:300px;"&gt;
  &lt;div style="width: 100%; height: 100%; position: relative;"&gt;&lt;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;"&gt;
          &lt;path d="M0 300 L25 150 L100 187.5 L150 0 L500 300"&gt;&lt;/path&gt;
      &lt;/svg&gt;
      &lt;div
          style="position: absolute; bottom: -40px; height: 40px; left: 0px; right: 0px; display: flex; justify-content: space-between;"&gt;
          &lt;div data-value="0"&gt;0&lt;/div&gt;
          &lt;div data-value="25"&gt;25&lt;/div&gt;
          &lt;div data-value="50"&gt;50&lt;/div&gt;
          &lt;div data-value="75"&gt;75&lt;/div&gt;
          &lt;div data-value="100"&gt;100&lt;/div&gt;
      &lt;/div&gt;
      &lt;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;"&gt;
          &lt;div data-value="80"&gt;80&lt;/div&gt;
          &lt;div data-value="60"&gt;60&lt;/div&gt;
          &lt;div data-value="40"&gt;40&lt;/div&gt;
          &lt;div data-value="20"&gt;20&lt;/div&gt;
          &lt;div data-value="0"&gt;0&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><a href="https://i.stack.imgur.com/YwWoi.png" rel="nofollow noreferrer">This is the output.</a> </p>
  
  <p>And here the Fiddle:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="app" style="position:absolute;left:50px;width:500px;height:300px;"&gt;&lt;div style="width: 100%; height: 100%; position: relative;"&gt;&lt;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;"&gt;&lt;path d="M0 300 L25 150 L100 187.5 L150 0 L500 300"&gt;&lt;/path&gt;&lt;/svg&gt;&lt;div style="position: absolute; bottom: -40px; height: 40px; left: 0px; right: 0px; display: flex; justify-content: space-between;"&gt;&lt;div data-value="0"&gt;0&lt;/div&gt;&lt;div data-value="25"&gt;25&lt;/div&gt;&lt;div data-value="50"&gt;50&lt;/div&gt;&lt;div data-value="75"&gt;75&lt;/div&gt;&lt;div data-value="100"&gt;100&lt;/div&gt;&lt;/div&gt;&lt;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;"&gt;&lt;div data-value="80"&gt;80&lt;/div&gt;&lt;div data-value="60"&gt;60&lt;/div&gt;&lt;div data-value="40"&gt;40&lt;/div&gt;&lt;div data-value="20"&gt;20&lt;/div&gt;&lt;div data-value="0"&gt;0&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Why the SVG is not displayed?</p>