Os documentos SVG oferecem suporte a atributos de dados personalizados?

87

Em HTML5, os elementos podem ter metadados arbitrária armazenadas em atributos XML cujos nomes começam com data-tais como <p data-myid="123456">. Isso também faz parte da especificação SVG?

Na prática, essa técnica funciona bem para documentos SVG em muitos lugares. Mas gostaria de saber se faz parte da especificação oficial do SVG ou não, pois o formato é jovem o suficiente para que ainda haja muita incompatibilidade entre os navegadores, principalmente no celular. Portanto, antes de me comprometer com o código, gostaria de saber se posso esperar que os navegadores futuros convirjam para oferecer suporte a isso.

Eu encontrei esta mensagem da lista de e-mails do grupo de trabalho dizendo que eles "esperam [que]" apoiem. Isso se tornou oficial?

svg web-standards Leopd
fonte

Respostas:

121

Embora outras respostas sejam tecnicamente corretas, elas omitem o fato de que o SVG fornece um mecanismo alternativo para data-*. O SVG permite a inclusão de qualquer atributo e tag , desde que não entre em conflito com os existentes (em outras palavras: você deve usar namespaces).

Para usar este mecanismo (equivalente):

  • use em mydata:idvez de data-myid, como este:<p mydata:id="123456">
  • certifique-se de definir o namespace na tag de abertura SVG, como este: <svg xmlns:mydata="http://www.myexample.com/whatever">

EDITAR: SVG2 , atualmente W3C Candidate Recommendation (04 de outubro de 2018), oferecerá suporte data-diretamente (sem namespaces, o mesmo que HTML). No entanto, levará algum tempo até que o suporte seja generalizado. Obrigado @cvrebert por apontar isso .

johndodo
fonte
7
Terceira parte da equação: el.getAttribute('mydata:id')obter os dados que você anexou ao elemento SVG. (Observação: se você estiver usando d3, o namespace será removido por padrão e você apenas el.getAttribute('id').)
ericsoco
2
Esta deve ser a resposta aceita. SVG é uma extensão do XML que permite usar tags de diferentes namespaces.
Melle
1
Por que o namespace precisa ser personalizado? Por que declarar um namespace HTML5 no documento não seria suficiente para usar data-*em SVG?
Fabien Snauwaert
1
Para sua informação, seja usando um namespace privado (por exemplo <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 o namespace xhtml, nenhum será validado em validator.w3.org/check (usando SVG 1.1), mas ambos funcionam no navegador. É então possível usar getAttributeou getAttributeNSpara buscar os dados.
Fabien Snauwaert
29

O data-*atributo faz parte do HTML5. Não é um atributo XML genérico.

A recomendação atual do SVG W3C é SVG 1.1 (de 2011-08). Não permite este atributo, como você pode verificar na lista de atributos .

O mesmo é o caso para o SVG 2 Working Draft (de 2012-08). Update (2015) : Parece que se destina a suportar data-*atributos no SVG 2 (atualmente ainda um Working Draft).

unor
fonte
19

data-*atributos em elementos SVG são oficialmente suportados no rascunho atual do SVG2. Vejo:

Cvrebert
fonte
9

existe um mecanismo mais geral.

O svg suporta descelementos que podem conter xml arbitrário de outros namespaces. vincule instâncias desses elementos ou nós filhos de seu próprio namespace por ids dependentes ou atributos refid.

esta é a parte relevante da especificação (5.4) .

colapsar
fonte
1
Obrigado pelo ponteiro. Devo inferir que o SVG não oferece suporte oficialmente a data-atributos?
Leopd
2
Não é descpor causa da acessibilidade?
matanster
@matt Acho que não, pelo menos baseado no stabndard.
recolhido
1
@matt Não necessariamente. Afaik, o padrão mencionaria apenas o propósito da anotação independente de qualquer renderização. Isso não contradiz a adequação do elemento para o propósito. Especificamente, há uma postagem no blog que discute o uso de aria-labelledbyatributos e elementos desc como rótulos acessíveis. O MDN recomenda um uso semelhante. dada a abundância de resultados do Google, as práticas recomendadas para svg acessível podem valer a pena questionar,
collapsar
1
@RockyRoad: não realmente - a especificação SVG permite explicitamente tais atributos (ao contrário de, por exemplo, HTML / XHTML que não permite). Observe também que, embora você possa (mal) usar descelementos de ription para dados arbitrários, é (IMHO) bastante óbvio pelo link que esse não era o propósito pretendido do descelemento. Não estou dizendo que você não deveria fazer isso, apenas que existe uma maneira melhor.
johndodo