Чи підтримують документи SVG власні атрибути даних?


87

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

На практиці ця техніка в багатьох місцях чудово працює для документів SVG. Але я хотів би знати, чи є це частиною офіційних специфікацій SVG чи ні, тому що формат досить молодий, щоб між браузерами все ще було багато несумісності, особливо в мобільних. Тому перед тим, як приступити до кодування, я хотів би знати, чи можу я сподіватися, що майбутні веб-переглядачі сходяться на підтримку цього.

Я знайшов це повідомлення зі списку розсилки робочої групи, в якому сказано, що вони "очікують [вони]" підтримають його. Це стало офіційним?

Відповіді:


121

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

Для використання цього (еквівалентного) механізму:

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

EDIT: SVG2 , наразі Рекомендація кандидата W3C (04 жовтня 2018 р.), Підтримуватиме data-безпосередньо (без просторів імен, як HTML). Однак знадобиться деякий час, поки підтримка стане широко розповсюдженою. Дякую @cvrebert за те, що вказав на це .


7
Третя частина рівняння: el.getAttribute('mydata:id')отримати дані, які ви прикріпили до елемента SVG. (Примітка: якщо ви використовуєте d3, простір імен за замовчуванням буде el.getAttribute('id')
видалено,

2
Це має бути прийнятою відповіддю. SVG - це розширення XML, яке дозволяє використовувати теги з різних просторів імен.
Мелле

1
Чому простір імен повинен бути спеціальним? Чому декларування простору імен HTML5 у документі недостатньо для використання data-*у SVG?
Fabien Snauwaert

1
FYI, незалежно від того, використовуючи приватний простір імен (наприклад <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 (на даний момент все ще робочий проект).


19

9

існує більш загальний механізм.

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

це відповідна частина специфікації (5.4) .


1
Дякую за вказівник. Чи слід робити висновок, що SVG офіційно не підтримує data-атрибути?
Леопд,

2
Чи не descпризначений для доступності?
matanster

@matt Я не думаю, що, принаймні, на основі стандартних даних.
колапсар

1
@matt Не обов'язково. Стандарт Afaik міг би лише згадувати мету анотації, незалежно від будь-якого візуалізації. Це не суперечить придатності елемента до цілі. Зокрема, є публікація в блозі, де обговорюється використання aria-labelledbyатрибутів та елементів desc як доступних міток. MDN рекомендує подібне використання. з огляду на безліч результатів Google, найкращі практики щодо доступного svg можуть бути вартими власного запитання,
колапсар

1
@RockyRoad: насправді - специфікація SVG явно дозволяє такі атрибути (на відміну, наприклад, від HTML / XHTML, який цього не робить). Також зауважте, що, хоча ви можете (не) використовувати descелементи вибору для довільних даних, з посилання цілком очевидно, що це не було прямим призначенням descелемента. Не кажучи, що ти не повинен цього робити, просто є кращий спосіб.
johndodo
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.