通过 inkskape:label 属性选择 SVG 元素答案

【问题标题】：Select SVG element by inkskape:label attribute通过 inkskape:label 属性选择 SVG 元素
【发布时间】：2013-02-27 11:23:12
【问题描述】：

我有一个加载了 SVG Jquery 插件 http://keith-wood.name/svg.html 的外部 SVG。 SVG 的一行是：
<g groupmode="layer" id="layer1" inkscape:label="myLabel"></g>
我可以通过这一行获取该元素的标签值
$('#layer1', svg.root()).attr("inkscape:label");
这将返回值“myLabel”。
如何使用该值选择相同的元素？
试过
var myElement = $('g[inkscape:label="myLabel"]', svg.root());
没有运气。

有什么建议吗？
蒂亚！

【问题讨论】：

标签： jquery svg attributes label

【解决方案1】：

根据this SO post 引用jquery docs，您最好的选择是var myElement = $('g[inkscape\\:label="myLabel"]', svg.root());。

【讨论】：

您是否尝试过遍历#layer1 元素的属性，检查inkscape:label 属性是否显示以及是否显示在哪个名称下？
尝试迭代：var attrs = $("#myElement")[0].attributes; for(var i=0;i " + attrs[i].nodeValue);结果是正确的：inkscape:groupmode => layer id => myElement inkscape:label => myLabel style => display:inline transform => translate(-292.15131,615.25519) 但仍然无法通过标签值选择它
您正在检查 dom 级别的属性。看看this so post 接受的答案，看看如何迭代所有属性，因为 jquery 知道它们。这应该揭示如何解决命名空间的问题。
@collapstar：谢谢！但是，如果在 svg 中，我将“inkscape:label”更改为“label”，那么一切正常；这样我可以读取标签并按标签选择项目

【解决方案2】：

我无法按照您的要求让它工作。我得到的解决方案是复制标签，但使用下划线而不是两个点，如下所示：

$('path').each(function() {
    $(this).attr({
        "inkscape_label" : $(this).attr('inkscape:label')
    });
});

然后我可以像这样按我想要的标签进行选择：

$('[inkscape_label = ...

【讨论】：

【解决方案3】：

对我来说，唯一有效的解决方案是this one：

const t = document.querySelectorAll('g') 
const layer = Array.from(t)
    .filter(t => t.getAttribute('inkscape:label') === 'myLabel')[0]

【讨论】：