无法让选择器与 JQuery SVG 库一起使用

Question

我无法使用 Keith Wood 的 SVG 库让外部加载的 SVG 完成我想做的事情。

我可以通过以下方式加载外部 SVG：

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

我可以让 my_function 正常工作。我就是无法让选择器正常工作。

我的外部加载的 SVG 采用以下形式：

<g id="parent_id">
  <path id = "child_1_id"  />
  <path id="child_2_id" />
  etc.  </g>

我可以为整个 parent_id 元素着色：

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

但是当我尝试时：

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

什么都没有发生。

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

两者都可以正常工作 - 没问题。但是我介绍#child_id的那一刻，例如：

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

什么都没有发生。我希望能够单独设置所有 child_id 元素的样式。我错过了什么？

Answer 1

如果您的孩子 ID 在整个 svg 文档中是唯一的，您可以使用以下 jquery 选择器：

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