Manipulate class of a <path> inside a SVG

Question

I have a JavaScript (pure, simple JS, no jQuery) inside a SVG where I grab a <path> via document.getElementById(). Now I try to add a class 'active' to this but I'm stuck.

Here's my (simplified) code so far:

var element = document.getElementById(myId);
//A console.log(element) returns the <path>-Object, so I guess this is working.

if (element) {
    //Add a class
}

I can get the current class(es) of the -Object:

console.log(element.className.baseVal);

But I can not add 'active' to this... I've tried several methods like eg

element.attr('class', className + ' active');

.. which returns

Uncaught TypeError: Object #<SVGPathElement> has no method 'attr'

Is there an easy way to do this in blank JavaScript? Am I missing something here?

Answer 1

Do this:

element.setAttribute('class', className + ' active');

You were trying to do it in jquery's syntax

Answer 2

将setAttribute()用于javascript .attr()是jquery函数。