Web ページに、jQuery でアクセスしたい SVG 要素がいくつかあります。SVG 要素には、いくつかのカスタム データ属性が関連付けられています。それを jQuery セレクターで使用して、正しい要素を取得したいと考えています。私の問題は、カスタム属性セレクターが Chrome では機能しないのに対し、IE9 と Firefox では機能することです。SVG 要素の例を次に示します。
<rect width="75" data-myAttribute="someValue"></rect>
これは、カスタム属性が設定されたすべての要素を取得するために使用する JavaScript です。
$('rect[data-myAttribute]');
つまり、このステートメントは Chrome では 0 要素を返しますが、Firefox と IE ではすべての X 要素を返します。ただし、セレクターで「標準」属性を使用すると、すべてのブラウザーで機能するようです。たとえば、次のステートメントは、すべてのブラウザですべての要素を正しく返します。
$('rect[width]');
なぜこれが起こっているのか、jQueryセレクターのSVG要素でカスタム属性を使用するために何ができるのかを誰かが説明してもらえますか? SVG 要素には代わりに使用できる ID またはクラスがないため、カスタム データ属性を使用します。
注: この特定のケースの SVG 要素は、HighCharts JavaScript ライブラリによって作成されますが、それは問題ではないと思います。jQuery バージョン 1.8.0 を使用しています。