Wie man Svg mit Javascript hinzufügen?

Ich verwende diesen Code, um Svg in ein Div-Tag einzufügen.Wie man Svg mit Javascript hinzufügen?

var container = document.getElementById("div_id"); 
var svg = document.createElement("svg"); 
svg.setAttribute("width",container.clientWidth); 
svg.setAttribute("height",container.clientHeight);  
container.appendChild(svg);

Bei der Überprüfung mit den Entwicklertools im Browser ist Svg im div vorhanden. Aber wenn ich über die SVG in den Entwicklertools schwinge, wird "Svg 0 * 0" angezeigt, obwohl die Attribute width und height auf 500 und 400 eingestellt sind. Ich kann es auf der Seite nicht sehen. Ich habe versucht, eine Zeile in die Svg einzufügen, die wiederum in Svg gesehen werden kann, aber nicht im Browser sichtbar ist. Brauche Hilfe.

Quelle

2016-05-06 Karthik Manivasagam

[Ihr Code scheint gut zu funktionieren.] (Https://jsfiddle.net/uf822snd/) (Verwendung von Firefox.) – Pointy

Mögliches Duplikat von [Wie kann ich WebKit zum Neuzeichnen/Repaint zwingen, um Stiländerungen zu propagieren?] (http://stackoverflow.com/questions/3485365/how-can-i-force-webkit-to-redraw-repaint-to-propagate-style-changes) – Sumurai8

Verwenden

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

Ihre SVG zu erstellen. Verwenden Sie es auch für Elemente.

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

Die Arbeit wie normale Elemente.

Quelle

2016-05-06 19:12:49 Wainage

Wie in der doppelten Frage ... – Sumurai8

Der Link angegeben Sie haben das Problem nicht speziell behandelt (es ist dort versteckt) und es ist nicht offensichtlich, wie Sie nach diesen Informationen suchen oder danach fragen. Kaum eine Abstimmung wert, wenn ich sicher bin, dass meine 30 Sekunden ihm etwas beigebracht haben. – Wainage

@Wainage Muss ich 'createElementNS' für jedes Element verwenden, das erstellt werden muss, oder sollte ich es nur für die '' und 'createElement' für die Elemente darin verwenden. –

Wie man Svg mit Javascript hinzufügen?

Antwort

Verwandte Themen