I documenti SVG supportano attributi di dati personalizzati?

87

In HTML5, gli elementi possono avere metadati arbitrari memorizzati in attributi XML i cui nomi iniziano con data-come <p data-myid="123456">. Anche questa parte delle specifiche SVG?

In pratica questa tecnica funziona bene per i documenti SVG in molti posti. Ma mi piacerebbe sapere se fa parte delle specifiche SVG ufficiali o meno, perché il formato è abbastanza giovane che c'è ancora molta incompatibilità tra i browser, specialmente nei dispositivi mobili. Quindi, prima di impegnarmi nel codice, vorrei sapere se posso aspettarmi che i browser futuri convergeranno nel supportare questo.

Ho trovato questo messaggio dalla mailing list del gruppo di lavoro che diceva che "si aspettano [che] lo supporteranno". È diventato ufficiale?

svg web-standards

— Leopd
fonte

121

Mentre altre risposte sono tecnicamente corrette, omettono il fatto che SVG fornisce un meccanismo alternativo per data-*. SVG consente di includere qualsiasi attributo e tag , purché non sia in conflitto con quelli esistenti (in altre parole: dovresti usare i namespace).

Per utilizzare questo meccanismo (equivalente):

usa mydata:idinvece di data-myid, in questo modo:<p mydata:id="123456">
assicurati di definire lo spazio dei nomi nel tag di apertura SVG, in questo modo: <svg xmlns:mydata="http://www.myexample.com/whatever">

EDIT: SVG2 , attualmente Raccomandazione del candidato W3C (4 ottobre 2018), supporterà data-direttamente (senza spazi dei nomi, lo stesso dell'HTML). Tuttavia, ci vorrà del tempo prima che il supporto sia diffuso. Grazie @cvrebert per averlo sottolineato .

— johndodo
fonte

7

Terza parte dell'equazione: el.getAttribute('mydata:id')per ottenere i dati allegati all'elemento SVG. (Nota: se stai usando d3, lo spazio dei nomi verrà rimosso per impostazione predefinita e lo farai solo el.getAttribute('id').)

— ericsoco,

2

Questa dovrebbe essere la risposta accettata. SVG è un'estensione di XML che consente di utilizzare tag da diversi spazi dei nomi.

— Melle

1

Perché lo spazio dei nomi deve essere personalizzato? Perché la dichiarazione di uno spazio dei nomi HTML5 nel documento non sarebbe sufficiente per essere utilizzata data-*in SVG?

— Fabien Snauwaert

2

Cordiali saluti, se si utilizza uno spazio dei nomi privato (ad esempio

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

:) o lo spazio dei nomi xhtml, nessuno dei due verrà convalidato su validator.w3.org/check (utilizzando SVG 1.1), ma entrambi funzionano nel browser. È quindi possibile utilizzare getAttributeo getAttributeNSper recuperare i dati.

— Fabien Snauwaert

29

L' data-*attributo fa parte di HTML5. Non è un attributo XML generico.

L'attuale Raccomandazione SVG W3C è SVG 1.1 (dal 2011-08). Non consente questo attributo, poiché puoi controllare nell'elenco degli attributi .

Lo stesso vale per SVG 2 Working Draft (dal 2012-08). Aggiornamento (2015) : sembra che sia destinato a supportare gli data-*attributi in SVG 2 (attualmente ancora una bozza di lavoro).

— unor
fonte

19

data-*gli attributi sugli elementi SVG sono ufficialmente supportati nell'attuale bozza di SVG2. Vedere:

w3c/svgwgcommit 1cb4ee9: attributi aggiunti SVGElement.datasete consentiti data-*su tutti gli elementi SVG.
ACTION-3694: Aggiungi note attributi "data- *" alle specifiche. (Creato il: 15 gennaio 2015)
RISOLUZIONE: Riserveremo gli attributi "data- *" da utilizzare nel contenuto SVG. L'API per gestirli è su Element. (da SVG WG Telecon del 15 gennaio 2015)
https://lists.w3.org/Archives/Public/www-svg/2014Dec/0022.html

— cvrebert
fonte

9

c'è un meccanismo più generale.

svg supporta descelementi che possono contenere xml arbitrari da altri spazi dei nomi. collega istanze di questi elementi o nodi figlio dal tuo spazio dei nomi tramite ID dipendenti o attributi refid.

questa è la parte rilevante della specifica (5.4) .

— collapsar
fonte

1

Grazie per il puntatore. Devo dedurre che SVG non supporta ufficialmente gli data-attributi?

— Leopd

2

Non è descpensato per motivi di accessibilità?

— matante

@ Matt Non credo, almeno in base allo stabndard.

— collapsar

1

@matt Non necessariamente. Afaik lo standard menzionerebbe solo lo scopo dell'annotazione indipendentemente da qualsiasi rendering. Ciò non contraddice l'idoneità dell'elemento allo scopo. Nello specifico, c'è un post sul blog che discute l'uso di aria-labelledbyattributi ed elementi desc come etichette accessibili. MDN consiglia un utilizzo simile. data la pletora di risultati di Google, le migliori pratiche per svg accessibile potrebbero valere una questione a sé stante,

— collapsar

1

@RockyRoad: non proprio - La specifica SVG consente esplicitamente tali attributi (al contrario, ad esempio, di HTML / XHTML che non lo fa). Nota anche che mentre puoi (male) usare descelementi di ription per dati arbitrari, è (IMHO) abbastanza ovvio dal link che questo non era lo scopo previsto descdell'elemento. Non sto dicendo che non dovresti farlo, solo che c'è un modo migliore.

— johndodo