Création de fragments SVG avec JavaScript et cordes

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

  •  12-10-2019
  •  | 
  •  

Question

Je l'ai vu plusieurs exemples sur la façon d'utiliser l'api DOM pour créer des fragments SVG à partir de Javascript, mais je suis curieux est-il quelque chose que je peux utiliser pour créer un fragment SVG à partir d'une chaîne similaire à innerHTML. J'ai essayé ce qui suit: 

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

Le problème est createContextualFragment () avec SVG souffle avec une exception dans Chrome. Alors, est-il un moyen de croix navigateur pour le faire?

Était-ce utile?

La solution

Voici donc ce que je faisais: 

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

Depuis parseXML () n'est pas exactement navigateur pris en charge croix je code en haut: 

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

Ensuite, je peux utiliser jQuery pour la requête à la place du fragment et définir les valeurs que je voudrais: 

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

Le problème est VML ne supporte pas quelque chose comme foreignObject. SVG est si proche d'être une excellente solution pour construire des applications qui ne sont pas tous les maux de tête HTML.

Autres conseils

Si vous voulez quelque chose comme innerHTML, votre code d'origine devrait avoir la plage sélectionnez l'élément, de mettre en place le contexte de l'analyseur droit. Ensuite, Chrome devrait fixer http://crbug.com/107982

En supposant que le bug a été corrigé, voici comment j'analyser un fragment SVG. https://github.com/pwnall/ddr/blob /master/javascripts/base/pwnvg.coffee#L184

En attendant, je suis venu avec une solution qui est très semblable à la vôtre, mais dit DOMParser qu'il a affaire avec le contenu SVG. Je pense que votre solution est mieux pour votre cas spécifique, mais mon code est un peu plus proche de innerHTML (en fait je cherche à correspondre insertAdjacentHTML).

https://github.com/pwnall/ ddr / blob / maître / JavaScripts / base / pwnvg.coffee # L169

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top