Can't get selectors to work with the JQuery SVG library

I'm having trouble getting an externally loaded SVG to do what I want it to with Keith Wood's SVG library.

I can load an external SVG fine with:

$(document).ready ( function () {  
      $("#some_id").svg({  
            loadURL: 'my_file.svg',  
            onLoad: my_function,  
            settings: {}  
          });  
});

I can get my_function working fine. I just can't get selectors working properly.

My externally-loaded SVG takes the form:

<g id="parent_id">
  <path id = "child_1_id"  />
  <path id="child_2_id" /&g开发者_如何学Got;
  etc.  </g>

I can colour the whole parent_id element fine with:

svg.style('#parent_id {fill: blue}')

But when I try:

svg.style('#child_id {fill: blue}')

nothing happens.

svg.style('g> path {fill: blue}') svg.style('g#parent_id > path {fill: blue}')

both work fine - no problem. But the minute I introduce #child_id, for instance:

svg.style('g#parent_id > path#child_id {fill: blue}')

nothing happens. I want to be able to style all the child_id elements separately. What am I missing?

If your child ID is unique through the whole svg document, you could use the following jquery selector:

var selector = 'svg path[id="child_1_id"]';
$(selector).attr('fill', 'blue');