Attribute selectors for SVG elements limited.

Attribute selectors for SVG elements limited.

I'm a new user to jQuery I admit, but already I'm finding it convenient for a new javascript application I'm building for one of my websites. The app in question uses SVG to help generate a music game based stepchart.

Due to the nature of SVG elements, I often have to be able to retrieve elements based on their x or y values inside the primary SVG document. Some sample code is as follows:

  1. <g id="svgNote" transform="scale(3)">
  2. <svg x="16" y="40" class="note_008 tap"><g><path d="m 1,2 v 12 c 0,0 0,1 1,1 h 12 c 0,0 1,0 1,-1 v -1 c 0,0 0,-1 -1,-1 H 7 L 15,4 V 2 C 15,2 15,1 14,1 H 12 L 4,9 V 2 C 4,2 4,1 3,1 H 2 C 2,1 1,1 1,2"/><line x1="14.5" y1="4.5" x2="11.5" y2="1.5"/><line x1="10.75" y1="8.25" x2="7.75" y2="5.25"/><line x1="7" y1="12" x2="4" y2="9"/></g></svg>
  3. <svg x="32" y="40" class="note_008 tap"><g transform="rotate(90, 8, 8)"><path d="m 1,2 v 12 c 0,0 0,1 1,1 h 12 c 0,0 1,0 1,-1 v -1 c 0,0 0,-1 -1,-1 H 7 L 15,4 V 2 C 15,2 15,1 14,1 H 12 L 4,9 V 2 C 4,2 4,1 3,1 H 2 C 2,1 1,1 1,2"/><line x1="14.5" y1="4.5" x2="11.5" y2="1.5"/><line x1="10.75" y1="8.25" x2="7.75" y2="5.25"/><line x1="7" y1="12" x2="4" y2="9"/></g></svg>
  4. <svg x="48" y="40" class="note_008 tap"><g><path d="m 1,2 v 12 l 1,1 h 12 l 1,-1 V 2 L 14,1 H 2 z"/><rect x="4" y="6" width="2" height="4" rx="0.5"/><rect x="10" y="6" width="2" height="4" rx="0.5"/></g></svg>
  5. <svg x="16" y="48" class="note_004 tap"><g><path d="m 1,2 v 12 c 0,0 0,1 1,1 h 12 c 0,0 1,0 1,-1 v -1 c 0,0 0,-1 -1,-1 H 7 L 15,4 V 2 C 15,2 15,1 14,1 H 12 L 4,9 V 2 C 4,2 4,1 3,1 H 2 C 2,1 1,1 1,2"/><line x1="14.5" y1="4.5" x2="11.5" y2="1.5"/><line x1="10.75" y1="8.25" x2="7.75" y2="5.25"/><line x1="7" y1="12" x2="4" y2="9"/></g></svg>
  6. <svg x="16" y="72" class="note_008 tap"><g><path d="m 1,2 v 12 c 0,0 0,1 1,1 h 12 c 0,0 1,0 1,-1 v -1 c 0,0 0,-1 -1,-1 H 7 L 15,4 V 2 C 15,2 15,1 14,1 H 12 L 4,9 V 2 C 4,2 4,1 3,1 H 2 C 2,1 1,1 1,2"/><line x1="14.5" y1="4.5" x2="11.5" y2="1.5"/><line x1="10.75" y1="8.25" x2="7.75" y2="5.25"/><line x1="7" y1="12" x2="4" y2="9"/></g></svg>
  7. <svg x="16" y="80" class="note_004 tap"><g><path d="m 1,2 v 12 c 0,0 0,1 1,1 h 12 c 0,0 1,0 1,-1 v -1 c 0,0 0,-1 -1,-1 H 7 L 15,4 V 2 C 15,2 15,1 14,1 H 12 L 4,9 V 2 C 4,2 4,1 3,1 H 2 C 2,1 1,1 1,2"/><line x1="14.5" y1="4.5" x2="11.5" y2="1.5"/><line x1="10.75" y1="8.25" x2="7.75" y2="5.25"/><line x1="7" y1="12" x2="4" y2="9"/></g></svg>
  8. </g>
There are 6 svgs inside a g inside another svg (not shown). I am able to select all of those internal SVGs using
  1. $("#svgNote > svg[x][y]");
What if I want a specific node inside? Say I want to remove the node with an x of 16 and a y of 40. First I need to select it:
  1. $("#svgNote > svg[x=16][y=40]");
The problem here is that with the above SVG data, I get an empty data set instead of the one node I know should exist. While the following line of code works:
  1. $("#svgNote > svg").children()[0];
That gets me the DOM equivalent: I can't use .attr, but have to use getAttribute and setAttribute.

I wish to know what needs to be done to enable better support for SVG elements, and perhaps other XML based elements in general.