Ich verwende Java-Skript, um ein dynamisches SVG basierend auf JS-Variablen auf meiner HTML / PHP-Seite unter Verwendung der innerHTML-Eigenschaft zu rendern.

Es ist eine komplexe SVG, also habe ich die Zeichenfolge in mehrere Zeilen aufgeteilt.

Mein aktueller Code funktioniert einwandfrei.

document.getElementById('diagram1').innerHTML 
= '<svg width="'+canvas_width+'" height="'+canvas_height+'">'
+ '<line x1="0" y1="'+depth+'" x2="'+width+'" y2="'+depth+'" stroke="#ff6622" stroke-width="3"></line>'
+ '<rect width="'+svg_width+'" height="'+svg_height+'" x="100" y="140" fill="#CCC"></rect>'
+ '</svg>';

Wenn ich jedoch eine der Zeilen in eine if-Anweisung einbinde, wird diese Zeile niemals gerendert, selbst wenn die Bedingungen der if-Anweisung erfüllt sind.

document.getElementById('diagram1').innerHTML 
= '<svg width="'+canvas_width+'" height="'+canvas_height+'">'
if (test == 'on') {
+ '<line x1="0" y1="'+depth+'" x2="'+width+'" y2="'+depth+'" stroke="#ff6622" stroke-width="3"></line>'
}
+ '<rect width="'+svg_width+'" height="'+svg_height+'" x="100" y="140" fill="#CCC"></rect>'
+ '</svg>';

Gibt es einen anderen / besseren Weg, dies zu tun? Vermisse ich etwas

-2
EllBrandon 17 Aug. 2020 im 21:33

5 Antworten

Beste Antwort

Sie können die Zeichenfolge erstellen, bevor Sie sie auf innerHTML setzen:

let text = '<svg width="'+canvas_width+'" height="'+canvas_height+'">';
if (test == 'on') {
    text += '<line x1="0" y1="'+depth+'" x2="'+width+'" y2="'+depth+'" stroke="#ff6622" stroke-width="3"></line>';
}
text += '<rect width="'+svg_width+'" height="'+svg_height+'" x="100" y="140" fill="#CCC"></rect>' + '</svg>';
document.getElementById('diagram1').innerHTML = text;

Oder Sie können ternär verwenden:

document.getElementById('diagram1').innerHTML
= '<svg width="'+canvas_width+'" height="'+canvas_height+'">'
+ (test == 'on' ? '<line x1="0" y1="'+depth+'" x2="'+width+'" y2="'+depth+'" stroke="#ff6622" stroke-width="3"></line>' : '')
+ '<rect width="'+svg_width+'" height="'+svg_height+'" x="100" y="140" fill="#CCC"></rect>'
+ '</svg>';
1
ranisalt 17 Aug. 2020 im 18:38

Sie mussten es in einer Variablen speichern und in Ihrer if-Klausel und später im Rest hinzufügen. Sie haben nicht alle Teile in innerHTML zusammengebaut, wenn und dahinter fehlen, sodass Sie Probleme mit diesen verlorenen Teilen bekommen.

let innerHTML = '<svg width="'+canvas_width+'" height="'+canvas_height+'">';
if (test == 'on') {
  innerHTML += '<line x1="0" y1="'+depth+'" x2="'+width+'" y2="'+depth+'" stroke="#ff6622" stroke-width="3"></line>'
};

innerHTML +=  '<rect width="'+svg_width+'" height="'+svg_height+'" x="100" y="140" fill="#CCC"></rect>'
  + '</svg>';
  
document.getElementById('diagram1').innerHTML;
0
Sascha 17 Aug. 2020 im 18:41
let defaultText = '<svg width="'+canvas_width+'" height="'+canvas_height+'">';
let extraText = '<line x1="0" y1="'+depth+'" x2="'+width+'" y2="'+depth+'" stroke="#ff6622" stroke-width="3"></line>';
let endText = '<rect width="'+svg_width+'" height="'+svg_height+'" x="100" y="140" fill="#CCC"></rect>'
+ '</svg>';

document.getElementById('diagram1').innerHTML = test == 'on' ?  defaultText + endText : defaultText + extraText + endText; 
1
Rahul Beniwal 17 Aug. 2020 im 18:39

Sie können den ternären Operator verwenden.

document.getElementById('diagram1').innerHTML 
= '<svg width="'+canvas_width+'" height="'+canvas_height+'">' +
(test == 'on' ? 
'<line x1="0" y1="'+depth+'" x2="'+width+'" y2="'+depth+'" stroke="#ff6622" stroke-width="3"></line>'
: '')
+ '<rect width="'+svg_width+'" height="'+svg_height+'" x="100" y="140" fill="#CCC"></rect>'
+ '</svg>';
1
iota 17 Aug. 2020 im 18:36