Apakah dokumen SVG mendukung atribut data- khusus?

87

Di HTML5, elemen dapat memiliki metadata arbitrer yang disimpan dalam atribut XML yang namanya dimulai dengan data-seperti <p data-myid="123456">. Apakah ini juga bagian dari spesifikasi SVG?

Dalam praktiknya, teknik ini berfungsi dengan baik untuk dokumen SVG di banyak tempat. Tapi saya ingin tahu apakah itu bagian dari spesifikasi SVG resmi atau tidak, karena formatnya masih cukup muda sehingga masih banyak ketidakcocokan antar browser, terutama di seluler. Jadi sebelum melakukan kode, saya ingin tahu apakah saya dapat mengharapkan browser masa depan berkumpul untuk mendukung ini.

Saya menemukan pesan ini dari milis kelompok kerja yang mengatakan mereka "berharap [mereka] akan" mendukungnya. Apakah ini menjadi resmi?

svg web-standards

— Leopd
sumber

121

Sementara jawaban lain secara teknis benar, mereka menghilangkan fakta bahwa SVG menyediakan mekanisme alternatif data-*. SVG mengizinkan atribut dan tag apa pun untuk disertakan, selama tidak bertentangan dengan yang sudah ada (dengan kata lain: Anda harus menggunakan ruang nama).

Untuk menggunakan mekanisme (setara) ini:

gunakan mydata:idsebagai pengganti data-myid, seperti ini:<p mydata:id="123456">
pastikan Anda menentukan namespace dalam tag pembuka SVG, seperti ini: <svg xmlns:mydata="http://www.myexample.com/whatever">

EDIT: SVG2 , saat ini Rekomendasi Kandidat W3C (04 Oktober 2018), akan mendukung data-secara langsung (tanpa ruang nama, sama seperti HTML). Akan membutuhkan waktu sebelum dukungan tersebar luas. Terima kasih @cvrebert karena telah menunjukkan hal ini .

— johndodo
sumber

7

Bagian ketiga dari persamaan: el.getAttribute('mydata:id')untuk mendapatkan data yang Anda lampirkan ke elemen SVG. (Catatan: jika Anda menggunakan d3, namespace akan el.getAttribute('id')

— dihilangkan

2

Ini harus menjadi jawaban yang diterima. SVG adalah ekstensi XML yang memungkinkan Anda menggunakan tag dari ruang nama yang berbeda.

— Melle

1

Mengapa namespace harus kustom? Mengapa mendeklarasikan namespace HTML5 dalam dokumen tidak cukup untuk digunakan data-*di SVG?

— Fabien Snauwaert

2

FYI, apakah menggunakan namespace privat (misalnya

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

:) atau namespace xhtml, keduanya tidak akan divalidasi di validator.w3.org/check (menggunakan SVG 1.1), tetapi keduanya berfungsi di browser. Kemudian dimungkinkan untuk menggunakan salah satu getAttributeatau getAttributeNSuntuk mengambil data.

— Fabien Snauwaert

29

The data-*atribut adalah bagian dari HTML5. Ini bukan atribut XML umum.

Rekomendasi SVG W3C saat ini adalah SVG 1.1 (dari 2011-08). Itu tidak mengizinkan atribut ini, karena Anda dapat memeriksa di daftar atribut .

Kasus yang sama berlaku untuk SVG 2 Working Draft (dari 2012-08). Pembaruan (2015) : Tampaknya itu dimaksudkan untuk mendukung data-*atribut di SVG 2 (saat ini masih Konsep Kerja).

— unor
sumber

19

data-*atribut pada elemen SVG secara resmi didukung dalam draf SVG2 saat ini. Lihat:

w3c/svgwgcommit 1cb4ee9: Menambahkan SVGElement.datasetdan mengizinkan data-*atribut pada semua elemen SVG.
ACTION-3694: Tambahkan catatan atribut "data- *" ke spesifikasi. (Dibuat pada: 15 Januari 2015)
RESOLUSI: Kami akan menyimpan atribut "data- *" untuk digunakan dalam konten SVG. API untuk menanganinya ada di Element. (dari SVG WG Telecon pada 15-Jan-2015)
https://lists.w3.org/Archives/Public/www-svg/2014Dec/0022.html

— cvrebert.dll
sumber

9

ada mekanisme yang lebih umum.

svg mendukung descelemen yang mungkin berisi xml sembarang dari namespace lain. contoh tautan elemen ini atau node turunan dari namespace Anda sendiri dengan id dependen atau atribut refid.

ini adalah bagian yang relevan dari spesifikasi (5.4) .

— collapsar
sumber

1

Terima kasih atas penunjuknya. Haruskah saya menyimpulkan SVG tidak secara resmi mendukung data-atribut?

— Leopd

2

Tidak descdimaksudkan untuk kepentingan aksesibilitas?

— matanster

@matt Saya rasa tidak, setidaknya berdasarkan pada stabndard.

— collapsar

1

@ Belum tentu. Afaik standar hanya akan menyebutkan tujuan anotasi terlepas dari terjemahan apa pun. Ini tidak bertentangan dengan kesesuaian elemen untuk tujuan tersebut. Secara khusus, ada entri blog yang membahas penggunaan aria-labelledbyatribut dan elemen deskripsi sebagai label yang dapat diakses. MDN merekomendasikan penggunaan serupa. mengingat banyaknya hasil Google, praktik terbaik untuk svg yang dapat diakses mungkin layak dipertanyakan,

— collapsar

1

@RockyRoad: tidak benar-benar - spesifikasi SVG secara eksplisit mengizinkan atribut seperti itu (sebagai lawan dari misalnya HTML / XHTML yang tidak). Juga perhatikan bahwa meskipun Anda dapat (salah) menggunakan descelemen ription untuk data sewenang-wenang, itu (IMHO) cukup jelas dari tautan bahwa ini bukan tujuan yang dimaksudkan dari descelemen tersebut. Bukan berarti Anda tidak boleh melakukannya, hanya saja ada cara yang lebih baik.

— johndodo