via JS - HTML schreiben

html.de-Forum JavaScript
1

Aloha zusammen

ich möchte via JS script Html (svg) code schreiben und verzweifel gerade…

<!DOCTYPE html>
<meta charset="utf-8">

<head><title>Test</title>
<script type="text/javascript">
//alert("Hallo Welt!");
</script>

<style>
</style>

<body>
  <svg width="2000px" height="2000px">
[INDENT]  <g transform="translate(700,700)">
[INDENT]  <g transform="scale(1,-1)">
[INDENT]  <circle cx="0" cy="0" r="10"/>
  <circle cx="0" cy="500" r="10"/>
  <circle cx="0" cy="-500" r="10"/>
  <circle cx="500" cy="0" r="10"/>
  <circle cx="-500" cy="0" r="10"/>
   
  <path stroke-width="5" stroke="blue" fill="red" d="M0,0 l 150 150"></path>
   
  <path style="fill: rgb(255, 221, 137); stroke: rgb(255, 221, 137);"   
  d="M500,0
  A 500,500 0 0,1 -500,0
  L -400,0
  A 400,400 0 0,0 400,0
  Z"></path>
   
  <script type="text/javascript">
   
[INDENT]  var path ="<path style="fill:rgb(255,0,0); stroke:rgb(255,0,0);" d="M -500,0 A 500,500 0 0,1 500,0 L 400,0 A 400,400 0 0,0 -400,0 Z"></path>";
  document.write(path);[/INDENT]
   
  </script>[/INDENT]
   
  </g>
</g>[/INDENT][/INDENT]
</svg>   
</body>

Ich bin wirklich ein anfänger was JS angeht aber ich versteh nicht warum er die variable nicht ins HTML schreibt, zumal es klappt wenn ich sowas wie

Hallo Welt

dort raus geben will, sogar ohne „document.write“…

Ich bin über jede Hilfe und vor allem über jeden Hinweis mehr als dankbar! :slight_smile:

2

Mit SVG kenne ich mich zwar nicht aus, aber Du hast auf jeden Fall hier ein Problem mit den Hochkommas:

var path ="<path style="fill:rgb(255,0,0); stroke:rgb(255,0,0);" d="M -500,0 A 500,500 0 0,1 500,0 L 400,0 A 400,400 0 0,0 -400,0 Z"></path>";

So ist es richtig:

var path ='<path style="fill:rgb(255,0,0); stroke:rgb(255,0,0);" d="M -500,0 A 500,500 0 0,1 500,0 L 400,0 A 400,400 0 0,0 -400,0 Z"></path>';

Edit: Außerdem musst Du einen CDATA-Bereich definieren:

  <script type="text/javascript">
  <![CDATA[
  var path = '<path style="fill:rgb(255,0,0); stroke:rgb(255,0,0);" d="M -500,0 A 500,500 0 0,1 500,0 L 400,0 A 400,400 0 0,0 -400,0 Z"></path>';
  document.write(path);
  ]]>
  </script>