J'ai fait une petite démonstration SVG en utilisant React pour dessiner des grilles hex. Cela fonctionne très bien dans Google Chrome, mais Firefox semble avoir DOM correct, mais n'affiche pas les éléments. Y at-il quelque chose de mal avec mon SVG?SVG fonctionne dans Chrome, mais pas Firefox
http://freiksenet.github.io/hexdrawer-svg/demo/
La raison pour laquelle ils ne sont pas rendu est que les éléments SVG générés par votre script ont l'espace de noms XHTML (ie. "http://www.w3.org/1999/xhtml "), quand ils devraient avoir l'espace de noms SVG (" http://www.w3.org/2000/svg"). Lorsque vous ajoutez des éléments à un fichier SVG dans Chrome, il utilise par défaut l'espace de noms SVG, alors que FF n'est pas aussi "intelligent".
Je ne connais pas ReactJS, donc je ne sais pas s'il existe une solution de contournement.
Vous pouvez les créer correctement si vous utilisez les méthodes DOM génériques (par exemple document.createElementNS() etc).
Dans le lien ci-dessus, Ben Alpert montre une façon d'inclure le balisage directement dans la page sans réagir prétraiter l'élément, en utilisant dangerouslySetInnerHTML.
Cet attribut n'a pas beaucoup de documents encore, mais il se trouve sur la page suivante: http://facebook.github.io/react/docs/jsx-gotchas.html
Voir la question suivante pour plus de détails sur le manque de documentation pour cette fonction: https://github.com/facebook/react/issues/413
Cela fonctionne avec la méthode que j'utilise ci-dessus, vous n'avez pas besoin de dangerouslySetInnerHTML. Le problème est SVG dans Firefox, pas React. – freiksenet
J'ai essayé copier coller le code SVG brut à la page html et l'ouvrir et cela ne fonctionne pas. SVG également utilisé pour travailler avec différents balisage SVG. – freiksenet