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" />
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?