Unterstützen SVG-Dokumente benutzerdefinierte Datenattribute?

85

In HTML5 können Elemente beliebige Metadaten in XML-Attributen gespeichert haben, deren Namen mit data-z <p data-myid="123456">. Ist dieser Teil der SVG-Spezifikation auch?

In der Praxis funktioniert diese Technik an vielen Stellen gut für SVG-Dokumente. Aber ich würde gerne wissen, ob es Teil der offiziellen SVG-Spezifikation ist oder nicht, da das Format jung genug ist, dass es immer noch viele Inkompatibilitäten zwischen Browsern gibt, insbesondere auf Mobilgeräten. Bevor ich mich zum Code verpflichte, möchte ich wissen, ob ich davon ausgehen kann, dass zukünftige Browser konvergieren, um dies zu unterstützen.

Ich fand diese Nachricht aus der Mailingliste der Arbeitsgruppe, dass sie "erwarten, dass [sie] sie unterstützen". Wurde dies offiziell?

svg web-standards Leopd
quelle

Antworten:

119

Während andere Antworten technisch korrekt sind, lassen sie die Tatsache aus, dass SVG einen alternativen Mechanismus für bietet data-*. SVG ermöglicht das Einfügen von Attributen und Tags , sofern diese nicht mit vorhandenen Attributen in Konflikt stehen (mit anderen Worten: Sie sollten Namespaces verwenden).

So verwenden Sie diesen (äquivalenten) Mechanismus:

  • Verwenden Sie mydata:idstattdessen data-myidwie folgt:<p mydata:id="123456">
  • Stellen Sie sicher, dass Sie den Namespace im SVG-Eröffnungs-Tag wie folgt definieren: <svg xmlns:mydata="http://www.myexample.com/whatever">

EDIT: SVG2 , derzeit W3C Candidate Recommendation (4. Oktober 2018) werden unterstützt data-direkt (ohne Namensraum, das gleiche wie HTML). Es wird einige Zeit dauern, bis die Unterstützung weit verbreitet ist. Vielen Dank an @cvrebert für den Hinweis .

Johndodo
quelle
7
Dritter Teil der Gleichung: el.getAttribute('mydata:id')Um die Daten zu erhalten, die Sie an das SVG-Element angehängt haben. (Hinweis: Wenn Sie d3 verwenden, wird der Namespace standardmäßig entfernt und Sie werden nur el.getAttribute('id').)
Ericsoco
2
Dies sollte die akzeptierte Antwort sein. SVG ist eine Erweiterung von XML, mit der Sie Tags aus verschiedenen Namespaces verwenden können.
Melle
1
Warum muss der Namespace benutzerdefiniert sein? Warum reicht es nicht aus, einen HTML5-Namespace im Dokument zu deklarieren, um ihn data-*in SVG zu verwenden?
Fabien Snauwaert
1
Zu Ihrer Information, ob einen eigenen Namensraum (zB: <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>) oder xhtml Namespace, so wird sich auf validieren validator.w3.org/check (unter Verwendung von SVG 1.1), aber beide funktionieren im Browser. Es ist dann möglich, entweder getAttributeoder getAttributeNSzu verwenden, um die Daten abzurufen.
Fabien Snauwaert
19

data-*Attribute für SVG-Elemente werden im aktuellen Entwurf von SVG2 offiziell unterstützt. Sehen:

cvrebert
quelle
9

Es gibt einen allgemeineren Mechanismus.

svg unterstützt descElemente, die beliebige XML-Dateien aus anderen Namespaces enthalten können. Verknüpfen Sie Instanzen dieser Elemente oder untergeordneten Knoten aus Ihrem eigenen Namespace durch abhängige IDs oder Refid-Attribute.

Dies ist der relevante Teil der Spezifikation (5.4) .

kollabieren
quelle
1
Danke für den Zeiger. Sollte ich daraus schließen, dass SVG data-Attribute nicht offiziell unterstützt ?
Leopd
2
Ist nicht descfür Zugänglichkeit gedacht?
Matanster
@matt Ich glaube nicht, zumindest basierend auf dem Standard.
Kollapsar
1
@matt Nicht unbedingt. Afaik der Standard würde nur den Zweck der Annotation unabhängig von einem Rendering erwähnen. Dies widerspricht nicht der Eignung des Elements für den Zweck. Insbesondere gibt es einen Blog-Beitrag , in dem die Verwendung von aria-labelledbyAttributen und absteigenden Elementen als zugängliche Beschriftungen erörtert wird. MDN empfiehlt eine ähnliche Verwendung. gegeben könnte die Fülle von Google - Ergebnisse, Best Practices für die zugänglich svg wert sein eine Frage der eigenen,
Kollapsar
1
@RockyRoad: nicht wirklich - Die SVG-Spezifikation erlaubt solche Attribute explizit (im Gegensatz zu beispielsweise HTML / XHTML, das dies nicht tut). Beachten Sie auch, dass Sie, obwohl Sie descRiptionselemente für beliebige Daten (falsch) verwenden können, (IMHO) aus dem Link ziemlich offensichtlich ist, dass dies nicht der beabsichtigte Zweck des descElements war. Nicht zu sagen, dass du es nicht tun sollst, nur dass es einen besseren Weg gibt.
Johndodo