La creazione di frammenti di SVG con Javascript e archi

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

  •  12-10-2019
  •  | 
  •  

Domanda

Ho visto alcuni esempi su come utilizzare l'API DOM per creare frammenti SVG dall'interno Javascript, ma sono curioso c'è qualcosa che posso usare per creare un frammento SVG da una stringa simile a innerHTML. Ho provato questo che segue: 

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

Il problema è createContextualFragment () con SVG esplode con un'eccezione in Chrome. Quindi non v'è un modo cross browser per fare questo?

È stato utile?

Soluzione

Così qui è quello che ho fatto: 

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>')

Dal parseXML () non è esattamente cross browser supportato ho questo codice nella parte superiore: 

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);
    }
}

Quindi posso utilizzare jQuery per query invece il frammento e impostare i valori che vorrei: 

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() );

Il problema è VML non supporta nulla di simile foreignObject. SVG è così vicino ad essere una grande soluzione per la creazione di applicazioni che non dispone di tutti i mal di testa HTML.

Altri suggerimenti

Se si desidera qualcosa di simile innerHTML, il codice originale deve avere la gamma di selezionare l'elemento, per impostare il contesto parser destra. Poi Chrome dovrebbe risolvere http://crbug.com/107982

Supponendo che il bug è stato risolto, ecco come avrei analizzare un frammento SVG. https://github.com/pwnall/ddr/blob /master/javascripts/base/pwnvg.coffee#L184

Nel frattempo, mi si avvicinò con una soluzione che è molto simile al tuo, ma dice che è DOMParser si occupano di contenuti SVG. Credo che la soluzione è meglio per il vostro caso specifico, ma il mio codice è un po 'più vicino a innerHTML (in realtà ho lo scopo di abbinare insertAdjacentHTML).

https://github.com/pwnall/ ddr / blob / master / javascript / base / pwnvg.coffee # L169

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top