jQuery 获取指定 ID 的 SVG 中的所有元素答案

【问题标题】：jQuery get all elements inside SVG with ID specifiedjQuery 获取指定 ID 的 SVG 中的所有元素
【发布时间】：2013-12-03 08:49:41
【问题描述】：

我使用this jQuery plugin 将 SVG 图像加载到 div 中。我想从包含 ID 属性的 SVG XML 数据中获取所有元素 ID。例如，在我的 SVG 图像中，circle 和 polygon 元素具有 ID 属性，但 rect 元素没有 ID 属性。我想用 XML 中的 ID 获取这两个。

我该怎么做？

我在svg函数的onLoad方法中试过这个。

$("#image svg").each(function() {
    $("#list").append("<option>" + this.id + "</option>");
});

#image 是svg 元素的容器，#list 是select 标记。

【问题讨论】：

请发布您到目前为止所尝试的内容。我们很乐意为您提供代码。
@FelixKling 我添加了我尝试过的代码。

标签： javascript jquery xml svg

【解决方案1】：

假设 SVG 已正确添加到页面中，您可以使用 "has attribute selector" 选择具有 ID 的所有元素：

$("#imag > svg [id]").each(function() {
    $("#list").append("<option>" + this.id + "</option>");
});

【讨论】：

感谢您的回答！

【解决方案2】：

你确定它不起作用吗？

我用你的代码创建了一个fiddle

$("#image svg").each(function() {
    $("#list").append("<option>" + this.id + "</option>");
});

我觉得很好。

编辑：将第二行替换为：

$("#list").append("<option style='display:" + ((this.id.length>0)?'inline':'none') + ";'>" + this.id + "</option>");

仅显示具有 ID 的那些。或者只是在附加选项标签之前放一个检查（长度> 0，或其他东西）（以后可能更容易理解/修改，我只是喜欢使用三元运算符：p）

【讨论】：

我的意思是这样的。 jsfiddle.net/y6bRC/2 我需要获取所有 ID 并只解析我想要的：矩形、多边形和圆形。
嘿，也感谢您的编辑。这可能不会列出没有 ID 的项目，但它仍然循环遍历 #image 中的 svg 元素，而不是 svg 中的元素。
@MikkoP 您使用了错误的选择器。在第一行，它应该是 $('#image g') OR $('#image svg *') 而不是 svg Updated Fiddle