SVGドキュメントはカスタムデータ属性をサポートしていますか?


87

HTML5では、要素は、名前data-<p data-myid="123456">。などで始まるXML属性に格納された任意のメタデータを持つことができます。これもSVG仕様の一部ですか?

実際には、この手法は多くの場所のSVGドキュメントで問題なく機能します。しかし、それが公式のSVG仕様の一部であるかどうかを知りたいのです。フォーマットが十分に若いため、特にモバイルでは、ブラウザー間でまだ多くの非互換性があります。したがって、コードをコミットする前に、将来のブラウザーがこれをサポートすることに集中できるかどうかを知りたいと思います。

ワーキンググループのメーリングリストから、「彼らはそれをサポートすることを期待している」というこのメッセージを見つけました。これは公式になりましたか?

回答:


121

他の答えは技術的には正しいですが、SVGがの代替メカニズムを提供するという事実を省略していますdata-*。SVGでは、既存のものと競合しない限り、任意の属性とタグを含めることができます(つまり、名前空間を使用する必要があります)。

この(同等の)メカニズムを使用するには:

  • 次のようmydata:idに、の代わりに使用しますdata-myid<p mydata:id="123456">
  • 次のように、SVG開始タグで名前空間を定義してください。 <svg xmlns:mydata="http://www.myexample.com/whatever">

編集: SVG2、現在W3C候補推奨(2018年10月4日)は、直接サポートしdata-ます(名前空間なし、HTMLと同じ)。ただし、サポートが普及するまでにはしばらく時間がかかります。これ指摘してくれた@cvrebertに感謝ます。


7
方程式の3番目の部分:el.getAttribute('mydata:id')SVG要素に添付したデータを取得します。(注:d3を使用している場合、名前空間はデフォルトで削除され、そのまま使用されますel.getAttribute('id')。)
ericsoco 2016

2
これは受け入れられた答えでなければなりません。SVGはXMLの拡張機能であり、さまざまな名前空間のタグを使用できます。
Melle 2016

1
名前空間をカスタムにする必要があるのはなぜですか?ドキュメントでHTML5名前空間を宣言するだけではdata-*、SVGで使用するのに十分ではないのはなぜですか?
Fabien Snauwaert 2017

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 2017


19

9

より一般的なメカニズムがあります。

svgはdesc、他の名前空間からの任意のxmlを含む可能性のある要素をサポートします。この要素のインスタンスまたは子ノードを、依存IDまたはrefid属性によって独自の名前空間からリンクします。

これは仕様(5.4)の関連部分です


1
ポインタをありがとう。SVGがdata-属性を公式にサポートしていないと推測する必要がありますか?
Leopd 2013年

2
descアクセシビリティのためのものではありませんか?
マタンスター2014

@matt少なくとも、stabndardに基づいて、私はそうは思いません。
コラプサー2014年

1
@matt必ずしもそうとは限りません。Afaik規格では、レンダリングとは関係なく、注釈の目的についてのみ言及しています。これは、目的に対する要素の適合性と矛盾しません。具体的にはaria-labelledbyアクセシブルなラベルとしての属性とdesc要素の使用について説明しているブログ投稿があります。MDNでも同様の使用をお勧めします。グーグルの結果が多すぎることを考えると、アクセス可能なsvgのベストプラクティスは、それ自体で質問する価値があるかもしれません
collapsar 2014年

1
@RockyRoad:実際にはそうではありません-SVG仕様では、そのような属性が明示的に許可されています(たとえば、HTML / XHTMLでは許可されていません)。またdesc、任意のデータにription要素を(誤)使用することはできますが、これがdesc要素の意図された目的ではなかったことはリンクから非常に明白です(IMHO)。あなたがそれをすべきではないと言っているのではなく、もっと良い方法があるというだけです。
johndodo 2016
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.