Snap.svg Failed to execute 'querySelector' on 'Document' - when trying to get an Element's stroke attribute

Failed to execute 'querySelector' on 'Document' - when trying to get an Element's stroke attribute

Open hdodov opened this issue 7 years ago • 9 comments

I have an SVG with a <path> inside of it. I want to get that path's stroke attribute. Here's my code:

var s = new Snap('#mainsvg');

Snap.load('business-model-simple.svg', function (response) {
    s.append(response);

    var arrow = s.select("#arr-base-01");
    console.log(arrow);
    console.log(arrow.attr("stroke"));
});

The element I'm trying to get is:

<path d="M412.910222,137.576193 C370.657325,73.7605156 298.219696,31.6750989 215.952492,31.6750989 C157.762359,31.6750989 104.490129,52.7311463 63.3392816,87.6397628 C38.6744822,108.563123 18.3642974,134.463029 3.9598231,163.788383" id="arr-base-01" stroke="#2853C3" stroke-width="2"></path>

The first console.log returns:

Element {node: path#arr-base-01, paper: Element, type: "path", id: "pathSj8sh4wfx4", anims: {…}, …}

So I actually get the element I need. I read in the docs that the Element class has an attr method to get or set an attribute. I use that in the second console.log, but I get the following error:

snap.svg.js:901 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': 'rgb(40, 83, 195)' is not a valid selector.

The actual stroke attribute that I'm trying to get has a value of #2853C3. It looks like Snap accurately gets it, but then converts it to RGB and uses querySelector on it?!

On the other hand, if I simply do:

console.log(arrow.node.getAttribute("stroke"));

I get #2853C3, which is correct. What am I doing wrong?

Side note. Using arrow.attr("id") correctly returns the id attribute.

Oct 15 '17 08:10 hdodov

Hi, Could you upload the whole thing to https://jsfiddle.net/ or something like that?

Oct 20 '17 11:10 YonatanHanan

@YonatanHanan

Here is the error reproduced with 'Element.animate'.

Working with v.0.1.0: http://jsfiddle.net/g144e7w1/
Failing with v.0.5: http://jsfiddle.net/41nqz64z/

Works with 0.4.0 as well.

Oct 22 '17 15:10 schabluk

@YonatanHanan - any updates on this? This also breaks the http://snapsvg.io/start/ getting started tutorial after step 13 on FireFox 58.0 and Vivaldi (latest) - works on IE11 though