Hinzufügen zu <SVG> Element aus Array

Ich habe ein Array mit <SVG> Element-Code. Wie kann ich das mit JavaScript anhängen? Ich habe versucht, die folgenden:Hinzufügen zu <SVG> Element aus Array

Beispiel Array:

global_array[0] = [ '<svg data="BusinessProductFigure" x="553.671875" 
y="167" id= "something" xmlns="http://www.w3.org/2000/svg" 
version="1.1"><rect x="4" y="4" width="60" height="14" 
fill="rgb(299,299,162)" stroke-linejoin="round" 
stroke="rgb(299,299,162)" stroke-width="1"/></svg>' ]

Anfügen [1]

for(var i = 0; i <= global_array.length; i++) { 
    document.getElementById("main_svg").innerHTML = global_array[i]; 
} 
})

keinen Fehler gibt, aber nichts angehängt wird. Überprüft in der Konsole.

Anfügen Test [2]

for(var i = 0; i <= global_array.length; i++) { 
    d3.select("#main_svg").append(global_array[i]); 
} 
})

Dies gibt DOM Ausnahmefehler.

Quelle

2016-06-15 Arihant

Mögliche Duplikat [D3 append (insert) bestehende SVG-String (oder Element) zu einem DIV] (http://stackoverflow.com/questions/ 29855452/d3-append-insert-existing-svg-string-or-element-to-a-div) –

Ihr Beispiel-Array weist dem Element null von 'global_array' ein Unter-Array zu. Ist das richtig? –

Ihr erster Ansatz wird fast funktionieren, wenn Sie die Schleifenende-Bedingung von i<=global_array.length zu i<global_array.length ändern. Ich sage fast, weil es nur für das letzte Element im Array funktioniert. Einstellung innerHTML hängt kein Element an - es ersetzt den gesamten Inhalt. Eine weitere Anforderung ist, dass der Container ("#main_svg") kein <svg>-Tag sein darf. Sie können nicht verschachtelt <svg> s

Fast Arbeitsbeispiel: https://jsfiddle.net/LukaszWiktor/wd3w2rjL/

Quelle

2016-06-15 20:11:04

hier konnte ich in der ersten Zeile sehen ..

Änderung global_array[0] zu global_array

oder

global_array[0] = '<svg data="BusinessProductFigure" x="553.671875" 
 
y="167" id= "something" xmlns="http://www.w3.org/2000/svg" 
 
version="1.1"><rect x="4" y="4" width="60" height="14" 
 
fill="rgb(299,299,162)" stroke-linejoin="round" 
 
stroke="rgb(299,299,162)" stroke-width="1"/></svg>';

diese nach Ihrem Code funktionieren:)

Quelle

2016-06-15 20:09:54

Antwort

Verwandte Themen