SVG belgeleri özel veri özniteliklerini destekliyor mu?

87

HTML5'de elemanları isimleri ile başlar, XML öznitelikleri depolanan keyfi meta olabilir data-gibi <p data-myid="123456">. Bu da SVG spesifikasyonunun bir parçası mı?

Uygulamada bu teknik, birçok yerde SVG belgeleri için iyi çalışır. Ancak bunun resmi SVG spesifikasyonunun bir parçası olup olmadığını bilmek istiyorum, çünkü format yeterince genç ve özellikle mobil tarayıcılarda tarayıcılar arasında hala çok fazla uyumsuzluk var. Bu yüzden, kodlama taahhüdünde bulunmadan önce, gelecekteki tarayıcıların bunu desteklemeye yakınlaşmasını bekleyip bekleyemeyeceğimi bilmek istiyorum.

Çalışma grubu posta listesinden bu mesajı "destekleyeceklerini umduklarını" söyleyerek buldum . Bu resmi hale geldi mi?

svg web-standards

— Leopd
kaynak

121

Diğer cevaplar teknik olarak doğru olsa da, SVG'nin alternatif bir mekanizma sağladığı gerçeğini göz ardı ediyorlar data-*. SVG , mevcut olanlarla çakışmadığı sürece (başka bir deyişle: ad alanlarını kullanmalısınız) herhangi bir öznitelik ve etiketin dahil edilmesine izin verir .

Bu (eşdeğer) mekanizmayı kullanmak için:

mydata:idyerine şu şekilde kullanın data-myid:<p mydata:id="123456">
ad alanını SVG açılış etiketinde şu şekilde tanımladığınızdan emin olun: <svg xmlns:mydata="http://www.myexample.com/whatever">

DÜZENLEME: SVG2 , şu anda W3C Aday Öneri (4 Ekim 2018), olacak destekleyen data-doğrudan (ad olmadan HTML ile aynı). Desteğin yaygınlaşması biraz zaman alacak. @Cvrebert bunu işaret ettiğiniz için teşekkürler .

— johndodo
kaynak

7

Denklemin üçüncü kısmı: el.getAttribute('mydata:id')SVG öğesine eklediğiniz verileri almak için. (Not: d3 kullanıyorsanız, ad alanı varsayılan olarak çıkarılır ve siz yalnızca olursunuz el.getAttribute('id').)

— ericsoco

2

Kabul edilen cevap bu olmalıdır. SVG, farklı ad alanlarından etiketleri kullanmanıza izin veren bir XML uzantısıdır.

— Melle

1

Ad alanı neden özel olmak zorunda? Belgede bir HTML5 ad alanı beyan etmek SVG'de kullanmak için neden yeterli olmasın data-*?

— Fabien Snauwaert

2

Bilginize, ister özel bir ad alanı (örneğin:) ister

<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 ad alanı kullanıyor olun, hiçbiri validator.w3.org/check (SVG 1.1 kullanarak) üzerinde doğrulama yapmaz, ancak her ikisi de tarayıcıda çalışır. Daha sonra verileri almak getAttributeveya kullanmak mümkündür getAttributeNS.

— Fabien Snauwaert

29

data-*Nitelik HTML5 parçasıdır. Genel bir XML niteliği değildir.

Mevcut SVG W3C Önerisi, SVG 1.1'dir (2011-08'den itibaren). Nitelikler listesinde kontrol edebileceğiniz için bu özelliğe izin vermez .

Aynı için böyledir SVG 2 Çalışma Taslağı (2012-08 itibaren). Güncelleme (2015) : Görünüşe göre SVG 2'deki öznitelikleri (şu anda hala bir Çalışma Taslağı) desteklemeyi amaçlamaktadır .data-*

— unor
kaynak

19

data-*SVG öğelerindeki öznitelikler resmi olarak SVG2'nin güncel taslağında desteklenmektedir. Görmek:

w3c/svgwgcommit 1cb4ee9: Tüm SVG öğelerine eklenen SVGElement.datasetve izin verilen data-*özellikler.
ACTION-3694: Spesifikasyona "data- *" nitelikleri notları ekleyin. (Oluşturulma tarihi: 15 Ocak 2015)
ÇÖZÜM: SVG içeriğinde kullanılmak üzere "data- *" özniteliklerini ayıracağız. Bunları işlemek için API, Element üzerindedir.(15 Ocak 2015 tarihinde SVG WG Telecon'dan)
https://lists.w3.org/Archives/Public/www-svg/2014Dec/0022.html

— cvrebert
kaynak

9

daha genel bir mekanizma var.

svg desc, diğer ad alanlarından rastgele xml içerebilen öğeleri destekler . bu öğelerin örneklerini veya alt düğümleri kendi ad alanınızdan bağımlı kimlikler veya refid öznitelikleri ile bağlayın.

bu şartnamenin (5.4) ilgili kısmıdır .

— Collapsar
kaynak

1

İşaretçi için teşekkürler. SVG'nin data-öznitelikleri resmi olarak desteklemediği sonucuna varmalı mıyım ?

— Leopd

2

Is not descerişilebilirlik aşkına geliyordu?

— matanster

@matt Sanmıyorum, en azından stabndard'a dayanıyor.

— collapsar

1

@matt Mutlaka değil. Afaik standardı, herhangi bir sunumdan bağımsız olarak yalnızca açıklama eklemenin amacından söz ederdi. Bu, öğenin amaca uygunluğuyla çelişmez. Özellikle, özniteliklerin ve açıklama öğelerinin erişilebilir etiketler olarak kullanımını tartışan bir blog yazısı var aria-labelledby. MDN , benzer bir kullanım önermektedir. çok sayıda google sonucu göz önüne alındığında, erişilebilir svg için en iyi uygulamalar

— başlı

1

@RockyRoad: gerçekten değil - SVG belirtimi bu tür niteliklere açıkça izin verir (örneğin HTML / XHTML'nin aksine). Ayrıca, description öğelerini rastgele veriler için (yanlış) kullanabilseniz de (IMHO) bağlantıdan descöğenin amaçlanan amacının bu olmadığı açıkça görülmektedir . Yapmamalısın demiyorum, sadece daha iyi bir yol var.

— johndodo