Erstellen von SVG-Fragmente mit Javascript und Streicher

StackOverflow https://stackoverflow.com/questions/4510515

  •  12-10-2019
  •  | 
  •  

Frage

Ich habe einige Beispiele zu sehen, wie den DOM-api verwendet SVG-Fragmente aus Javascript zu erstellen, aber ich bin neugierig, gibt es etwas, das ich verwenden kann ein SVG-Fragment aus einem String ähnlich wie innerHTML- zu erstellen. Ich habe diese folgendes versucht: 

var svg = '<foreignObject><body xmlns="http://www.w3.org/1999/xhtml"><p>Hello World</p></foreignObject>'
var range = document.createRange();
return range.createContextualFragment(svg);

Das Problem ist createContextualFragment () mit SVG bläst mit einer Ausnahme in Chrome auf. So gibt es einen Cross-Browser-Weg, dies zu tun?

War es hilfreich?

Lösung

So, hier ist das, was ich getan habe: 

parseXML('<foreignObject xmlns="http://www.w3.org/2000/svg"><body xmlns="http://www.w3.org/1999/xhtml"><p id="seriesTitle"></p><p id="seriesValue"></p><p style="margin:0;text-align:center;" id="seriesDate"></p></body></foreignObject>')

Da parseXML () ist nicht genau das Cross-Browser unterstützt Ich habe diesen Code an der Spitze: 

if (typeof parseXML=='undefined') {
    window.parseXML = function (s,doc) {
        doc = doc || document;
        var doc2=(new DOMParser()).parseFromString(s, "text/xml");
        return doc.adoptNode(doc2.documentElement);
    }
}

Dann kann ich jQuery Abfrage verwenden, anstatt das Fragment und die Werte gesetzt Ich möchte: 

jQuery('#seriesTitle', detailChart.mytooltip).text( point.series.name );
jQuery('#seriesValue', detailChart.mytooltip).text( point.y );
jQuery('#seriesDate', detailChart.mytooltip).text( date.getMonth() + '/' + date.getDate() + '/' + date.getFullYear() );

Das Problem ist VML unterstützt nicht so etwas wie foreign. SVG ist so nah eine große Lösung für den Aufbau von Anwendungen zu sein, dass nicht alle HTML-Kopfschmerzen hat.

Andere Tipps

Wenn Sie so etwas wie innerHTML wollen, Ihr Original-Code soll das hat Bereich das Element wählen, den richtigen Parser Kontext einzurichten. Dann sollten Chrome beheben http://crbug.com/107982

den Fehler Angenommen wurde behoben, hier ist, wie ich ein SVG-Fragment analysieren würde. https://github.com/pwnall/ddr/blob /master/javascripts/base/pwnvg.coffee#L184

In der Zwischenzeit kam ich mit einer Lösung, die zu Ihnen sehr ähnlich ist, aber sagt DOMParser, dass es mit SVG Inhalt zu tun hat. Ich denke, Ihre Lösung besser für Ihren speziellen Fall ist, aber mein Code ist ein bisschen näher an innerHTML (eigentlich mein Ziel insertAdjacentHTML entsprechen).

https://github.com/pwnall/ ddr / Blob / Master / Javascripts / base / pwnvg.coffee # L169

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top