SVG dans XHTML5 : définir les attributs avec l'espace de nom approprié

Question

Résumé TL;DR : Est-il approprié d'utiliser setAttribute au lieu de setAttributeNS pour les éléments SVG ?

Détails :
Considérez cette image SVG intégrée dans du XHTML5 qui utilise JavaScript pour créer et ajouter dynamiquement des éléments au dessin : http://phrogz.net/svg/svg_in_xhtml5.xhtml

Les éléments SVG créés par JavaScript et ajoutés à l'écran de l'utilisateur. <svg> doit être créé en utilisant...

var el = document.createElementNS("http://www.w3.org/2000/svg",'foo');

...au lieu de...

var el = document.createElement('foo');

...afin qu'elles soient traitées comme des éléments SVG et rendues dans le navigateur. Ceci est raisonnable et compréhensible. Cependant, selon cette page Je devrais également définir les attributs de ces éléments en utilisant...

el.setAttributeNS( null, 'foo', 'bar' );

...au lieu du code que j'utilise actuellement :

el.setAttribute( 'foo', 'bar' );

Ce que je fais fonctionne dans Chrome, Safari et Firefox. Voici ce que j'ai code juridique Est-ce que c'est équivalent à la recommandation ou est-ce que c'est juste se produire ne fonctionne pas en raison de la nature permissive des navigateurs et je dois plutôt utiliser setAttributeNS pour être valide ?

Answer 1

Tant que vous n'utilisez pas d'attributs à espacement de noms (avec ou sans préfixe), vous pouvez utiliser setAttribute.

La recommandation de setAttributeNS est bonne dans un sens, car vous n'avez pas besoin de vous soucier de l'utilisation de différentes méthodes (et de savoir quand utiliser laquelle). Vous n'avez vraiment besoin de setAttributeNS que lorsque vous devez changer par exemple xlink:href ou des attributs namespaced personnalisés. D'un autre côté, les gens se trompent dans les espaces de noms (en essayant parfois d'utiliser par exemple l'espace de noms svg au lieu de NULL pour les attributs svg), donc ce n'est pas clair ce qui est le moins confus IMHO.

DOM 2 Core dit ceci à propos des méthodes get/setAttribute du niveau 1 du DOM :

D ignorent les espaces de noms. Par conséquent, bien qu'il soit sûr d'utiliser ces méthodes lorsqu'elles ne avec des espaces de noms, leur utilisation et celle des nouvelles méthodes en même temps doit être éviter.

J'ajouterai que "au même moment" aurait peut-être dû être remplacé par "au même moment sur le même attribut (prévu)", ou quelque chose de similaire.

SVG lui-même n'exige pas que vos scripts soient "légaux" ou quelque chose comme ça, sauf pour le balisage svg lui-même, mais il exige le support de certaines spécifications DOM, comme DOM 2 Core dans le cas de SVG 1.1.