Поддерживают ли документы SVG настраиваемые атрибуты данных?

87

В HTML5 элементы могут иметь произвольные метаданные, хранящиеся в атрибутах XML, имена которых начинаются с data-таких, как <p data-myid="123456">. Это тоже часть спецификации SVG?

На практике этот метод отлично работает для документов SVG во многих местах. Но я хотел бы знать, входит ли это в официальную спецификацию SVG или нет, потому что формат достаточно молодой, и все еще существует большая несовместимость между браузерами, особенно в мобильных. Поэтому, прежде чем переходить к коду, я хотел бы знать, могу ли я ожидать, что будущие браузеры будут поддерживать это.

Я нашел это сообщение в списке рассылки рабочей группы, в котором говорится, что они «ожидают, что [они] будут» его поддерживать. Это стало официальным?

svg web-standards Леопд
источник

Ответы:

121

Хотя другие ответы являются технически правильными, они не учитывают тот факт, что SVG предоставляет альтернативный механизм для data-*. SVG позволяет включать любые атрибуты и теги , если они не конфликтуют с существующими (другими словами: вы должны использовать пространства имен).

Чтобы использовать этот (эквивалентный) механизм:

  • используйте mydata:idвместо data-myid, например:<p mydata:id="123456">
  • убедитесь, что вы определили пространство имен в открывающем теге SVG, например: <svg xmlns:mydata="http://www.myexample.com/whatever">

РЕДАКТИРОВАТЬ: SVG2 , в настоящее время рекомендация кандидата W3C (4 октября 2018 г.), будет поддерживать data-напрямую (без пространств имен, как в HTML). Однако пройдет некоторое время, прежде чем поддержка станет широко распространенной. Спасибо @cvrebert за указание на это .

Johndodo
источник
7
Третья часть уравнения: el.getAttribute('mydata:id')получить данные, которые вы прикрепили к элементу SVG. (Примечание: если вы используете d3, пространство имен будет удалено по умолчанию, и вы просто сделаете это el.getAttribute('id').)
ericsoco
2
Это должен быть принятый ответ. SVG - это расширение XML, которое позволяет использовать теги из разных пространств имен.
Melle
1
Почему пространство имен должно быть индивидуальным? Почему для использования data-*в SVG недостаточно объявления пространства имен HTML5 в документе ?
Fabien Snauwaert
1
К вашему сведению, независимо от того, используется ли частное пространство имен (например <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>:) или пространство имен xhtml, ни одно из них не будет проверяться на validator.w3.org/check (с использованием SVG 1.1), но оба работают в браузере. Затем можно использовать либо getAttributeили, getAttributeNSчтобы получить данные.
Fabien Snauwaert
29

data-*Атрибут является частью HTML5. Это не общий атрибут XML.

Текущая рекомендация SVG W3C - SVG 1.1 (с 2011-08). Он не позволяет использовать этот атрибут, как вы можете проверить в списке атрибутов .

То же самое и с рабочим проектом SVG 2 (с 2012-08 гг.). Обновление (2015 г.) : похоже, что он предназначен для поддержки data-*атрибутов в SVG 2 (в настоящее время все еще рабочий проект).

unor
источник
19

data-*Атрибуты элементов SVG официально поддерживаются в текущем проекте SVG2. Увидеть:

Cvrebert
источник
9

есть более общий механизм.

svg поддерживает descэлементы, которые могут содержать произвольный xml из других пространств имен. Свяжите экземпляры этих элементов или дочерних узлов из вашего собственного пространства имен с помощью зависимых идентификаторов или атрибутов refid.

это соответствующая часть спецификации (5.4) .

коллапсар
источник
1
Спасибо за указатель. Должен ли я предполагать, что SVG официально не поддерживает data-атрибуты?
Leopd
2
Не descдля удобства доступа?
Matanster
@matt Я так не думаю, по крайней мере, исходя из стандарта.
collapsar
1
@matt Не обязательно. В стандарте Afaik упоминается только цель аннотации, независимая от какой-либо визуализации. Это не противоречит пригодности элемента для этой цели. В частности, в блоге обсуждается использование aria-labelledbyатрибутов и элементов desc в качестве доступных меток. MDN рекомендует аналогичное использование. Учитывая изобилие результатов Google, лучшие практики для доступного SVG могут стоить отдельного вопроса,
collapsar
1
@RockyRoad: не совсем - спецификация SVG явно допускает такие атрибуты (в отличие, например, от HTML / XHTML, который этого не делает). Также обратите внимание, что, хотя вы можете (неправильно) использовать descэлементы ription для произвольных данных, (IMHO) совершенно очевидно из ссылки, что это не было предполагаемой целью descэлемента. Я не говорю, что вам не следует этого делать, просто есть способ лучше.
johndodo