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

Posted 2023-03-05

【中文标题】无法让选择器与 JQuery SVG 库一起使用

【英文标题】：Can't get selectors to work with the JQuery SVG library

【发布时间】：2011-04-28 15:49:28

【问题描述】：

我无法使用 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 元素的样式。我错过了什么？

【问题讨论】：

您的 svg 得到 child_1_id 和 child_2_id 但您在脚本中使用 #child_id 是否正常？这绝对不一样...

对不起。转录错误。我试图运行的代码是：

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

【参考方案1】：

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

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