Select SVG element by inkskape:label attribute

Question

I have an external SVG loaded with the SVG Jquery plugin http://keith-wood.name/svg.html. One line of the SVG is:
<g groupmode="layer" id="layer1" inkscape:label="myLabel"></g>
I'm able to get the value of the label of that element by this line
$('#layer1', svg.root()).attr("inkscape:label");
this will return the value "myLabel".
How do I select the same element using that value?
Tryed with
var myElement = $('g[inkscape:label="myLabel"]', svg.root());
with no luck.

Any suggestion?
TIA!

score 2 · Answer 1 · edited May 23 '17 at 11:57

2

according to this SO post referencing the jquery docs, your best bet would be var myElement = $('g[inkscape\\:label="myLabel"]', svg.root());.

edited May 23 '17 at 11:57

Community

1
1

answered Mar 19 '13 at 19:59

collapsar

17,010
4
35
61

have you tried iterating over the attributes of the `#layer1` element checking whether the `inkscape:label` attribute shows up at all and if it does under which name ? – collapsar Mar 21 '13 at 14:28
tryed iteration with: var attrs = $("#myElement")[0].attributes; for(var i=0;i " + attrs[i].nodeValue); } and the result is correctly: inkscape:groupmode => layer id => myElement inkscape:label => myLabel style => display:inline transform => translate(-292.15131,615.25519) but still can't select it by label value – ettolo Mar 26 '13 at 15:34
you are inspecting attributes on the dom level. have a look at the accepted answer of [this so post](http://stackoverflow.com/questions/2224933/iterating-over-element-attributes-with-jquery) to see how to iterate over all attributes as jquery knows them. this should reveal how to address the namespaced ones. – collapsar Mar 26 '13 at 15:52
@collapstar: thank you! but everything works if, inside the svg, i change "inkscape:label" to "label"; this way i can read label and select items by label – ettolo Mar 26 '13 at 16:05

score 0 · Answer 2 · answered Jun 28 '18 at 22:24

It's been impossible for me to make it work as you request. The solution I have arrived, is duplicating the tag, but using an underscode instead of two dots, like this:

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

Then I can select by the label I want like this:

$('[inkscape_label = ...

score 0 · Answer 3 · answered Nov 26 '21 at 15:24

0

For me the only solution that worked was this one:

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

answered Nov 26 '21 at 15:24

G M

20,759
10
81
84

score 0 · Answer 4 · answered Jan 18 '23 at 22:34

The title isn't very descriptive so I ended up here when trying to figure out how to select it via CSS.

In case it helps anyone else:

<style>
[inkscape\:label="MyNamedLayer"] {
   /*green*/
        filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);
        filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
    }
</style>

Select SVG element by inkskape:label attribute

4 Answers4