svg-Kreis nicht gezeichnet wird mit javascript

Ich habe versucht zu tun, ein hello world für die svg-manipulation mit javascript in HTML. Ich habe geschrieben, die folgenden code und obwohl es erzeugt die richtige html -, sehe ich keine Ausgabe im browser, noch sehe ich irgend einen Fehler.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
var svg1 = document.createElement("svg");
svg1.setAttribute("height",200);
svg1.setAttribute("width",500);
document.body.appendChild(svg1);
var circles = document.createElement("circle");
circles.setAttribute("cx",20);
circles.setAttribute("cy",20);
circles.setAttribute("r",20);
svg1.appendChild(circles);
</script>
</body>
</html>

Wohin gehe ich falsch? vielen Dank im Voraus.

InformationsquelleAutor Abdul Khader | 2013-10-09
  1. 23

    SVG-Elemente erstellt werden müssen, mit der SVG-XML-namespace. Sie können tun, dass mit createElementNS und mit der http://www.w3.org/2000/svg namespace:

    <!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
var svg1 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg1.setAttribute("height",200);
svg1.setAttribute("width",500);
document.body.appendChild(svg1);
var circles = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circles.setAttribute("cx",20);
circles.setAttribute("cy",20);
circles.setAttribute("r",20);
svg1.appendChild(circles);
</script>
</body>
</html>
    • Dank zneak, funktioniert wie ein Charme jetzt. Ich kann jetzt schlafen.
    • Sichere Sache. Vergessen Sie nicht, klicken Sie auf das Häkchen Links, um die Antwort, ob es dein problem gelöst hat.
    InformationsquelleAutor zneak
Schreibe einen Kommentar