Les documents SVG prennent-ils en charge les attributs de données personnalisés?

87

En HTML5, les éléments peuvent avoir des métadonnées arbitraires stockées dans des attributs XML dont les noms commencent par data-tels que <p data-myid="123456">. Cela fait-il également partie de la spécification SVG?

En pratique, cette technique fonctionne bien pour les documents SVG dans de nombreux endroits. Mais j'aimerais savoir si cela fait partie de la spécification officielle SVG ou non, car le format est suffisamment jeune pour qu'il y ait encore beaucoup d'incompatibilité entre les navigateurs, en particulier sur mobile. Donc, avant de m'engager dans le code, j'aimerais savoir si je peux m'attendre à ce que les futurs navigateurs convergent pour prendre en charge cela.

J'ai trouvé ce message de la liste de diffusion du groupe de travail disant qu'ils "s'attendent à ce [qu'ils]" le soutiennent. Cela est-il devenu officiel?

svg web-standards

— Léopd
source

121

Bien que d'autres réponses soient techniquement correctes, elles omettent le fait que SVG fournit un mécanisme alternatif pour data-*. SVG permet d' inclure n'importe quel attribut et balise , tant qu'il n'est pas en conflit avec ceux existants (en d'autres termes: vous devez utiliser des espaces de noms).

Pour utiliser ce mécanisme (équivalent):

utilisez à la mydata:idplace de data-myid, comme ceci:<p mydata:id="123456">
assurez-vous de définir l'espace de noms dans la balise d'ouverture SVG, comme ceci: <svg xmlns:mydata="http://www.myexample.com/whatever">

EDIT: SVG2 , actuellement recommandation candidate du W3C (4 octobre 2018), prendra en charge data-directement (sans espaces de noms, le même que HTML). Cela prendra du temps avant que le soutien ne soit généralisé. Merci @cvrebert pour l' avoir signalé .

— johndodo
source

7

Troisième partie de l'équation: el.getAttribute('mydata:id')pour obtenir les données que vous avez attachées à l'élément SVG. (Remarque: si vous utilisez d3, l'espace de noms sera supprimé par défaut et vous ne le ferez que el.getAttribute('id').)

— ericsoco

2

Cela devrait être la réponse acceptée. SVG est une extension de XML qui vous permet d'utiliser des balises provenant de différents espaces de noms.

— Melle le

1

Pourquoi l'espace de noms doit-il être personnalisé? Pourquoi déclarer un espace de noms HTML5 dans le document ne suffirait-il pas à être utilisé data-*en SVG?

— Fabien Snauwaert

1

Pour info, que ce soit en utilisant un espace de noms privé (par exemple

<svg xmlns="http://www.w3.org/2000/svg" xmlns:mydata="http://www.myexample.com/whatever"><text x="10" y="20" mydata:id="something">SVG</text></svg>

:) ou l'espace de noms xhtml, aucun des deux ne validera sur validator.w3.org/check (en utilisant SVG 1.1), mais les deux fonctionnent dans le navigateur. Il est alors possible d'utiliser l'un getAttributeou l' autre ou getAttributeNSpour récupérer les données.

— Fabien Snauwaert

29

L' data-*attribut fait partie de HTML5. Ce n'est pas un attribut XML générique.

La recommandation actuelle du SVG W3C est SVG 1.1 (à partir de 2011-08). Il n'autorise pas cet attribut, car vous pouvez vérifier dans la liste des attributs .

Il en va de même pour le document de travail SVG 2 (à partir de 2012-08). Mise à jour (2015) : Il semble qu'il soit destiné à prendre en charge les data-*attributs dans SVG 2 (actuellement encore un brouillon de travail).

— unor
source

19

data-*Les attributs sur les éléments SVG sont officiellement pris en charge dans le projet actuel de SVG2. Voir:

w3c/svgwgcommit 1cb4ee9: attributs ajoutés SVGElement.datasetet autorisés data-*sur tous les éléments SVG.
ACTION-3694: Ajouter des notes d'attributs "data- *" aux spécifications. (Créé le: 15 janvier 2015)
RÉSOLUTION: Nous réserverons les attributs "data- *" à utiliser dans le contenu SVG. L'API pour les gérer se trouve sur Element. (de SVG WG Telecon le 15 janvier 2015)
https://lists.w3.org/Archives/Public/www-svg/2014Dec/0022.html

— Cvrebert
source

9

il existe un mécanisme plus général.

svg prend en charge les descéléments qui peuvent contenir du xml arbitraire d'autres espaces de noms. liez des instances de ces éléments ou des nœuds enfants à partir de votre propre espace de noms par des identifiants dépendants ou des attributs refid.

c'est la partie pertinente de la spécification (5.4) .

— trou noir
source

1

Merci pour le pointeur. Dois-je déduire que SVG ne prend pas officiellement en charge les data-attributs?

— Leopd

2

N'est-ce pas descfait pour des raisons d'accessibilité?

— matanster le

@matt Je ne pense pas, du moins basé sur le stabndard.

— collapsar

1

@matt Pas nécessairement. Afaik la norme ne mentionnerait que le but de l'annotation indépendamment de tout rendu. Cela ne contredit pas l'adéquation de l'élément à l'objectif. Plus précisément, il existe un article de blog sur l'utilisation des aria-labelledbyattributs et des éléments desc comme étiquettes accessibles. MDN recommande une utilisation similaire. étant donné la pléthore de résultats Google, les meilleures pratiques pour les svg accessibles pourraient valoir la peine d'être posées,

— collapsar

1

@RockyRoad: pas vraiment - la spécification SVG autorise explicitement de tels attributs (contrairement à HTML / XHTML par exemple qui ne le fait pas). Notez également que même si vous pouvez (mal) utiliser des descéléments de réponse pour des données arbitraires, il est (à mon humble avis) tout à fait évident d'après le lien que ce n'était pas le but visé de l' descélément. Je ne dis pas que vous ne devriez pas le faire, mais simplement qu'il existe un meilleur moyen.

— johndodo