无法让选择器与 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');