Class not added with addClass() and Attr() on SVG element

Question

I have a problem with 'SVG' element, what i am trying to add class to an 'svg' circle element using attr() method, but it is not working.

**Here is the some piece of code: **

r = new ScaleRaphael('lg-map', config.mapWidth, config.mapHeight),
                attributes = {
                    fill: '#d9d9d9',
                    cursor: 'crosshair',
                    stroke: config.strokeColor,
                    'stroke-width': 1,
                    'stroke-linejoin': 'round',
                    'font-family': 'Verdana',
                    'font-size': '19px',
                    'font-weight': 'bold'
                },
var pinattrs = {
'cursor': 'pointer',
'fill':pins[i].color,
'stroke':config.strokeColor,
 'id': pinId,
'class':'smallCircle'
 };  
var pin = r.circle(pins[i].xPos, pins[i].yPos, config.pinSize).attr(pinattrs);

And the result is:

<circle cx="425" cy="425" r="10" fill="#737373" stroke="#f2f2f2" id="2" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer;"></circle>

I also tried addClass() method but have the same result.

Thanks

addClass definately doesnt work with SVG elements. attr() should but yeah, where is r.circle coming from? — Sergio Alen, Feb 24 '17 at 06:56
http://stackoverflow.com/questions/8638621/jquery-svg-why-cant-i-addclass — Khaleel, Feb 24 '17 at 07:02

score 0 · Answer 1 · answered Feb 26 '17 at 12:35

Well you're not accessing the class key in your .attr() parameter.

Change this:

var pin = r.circle(pins[i].xPos, pins[i].yPos, config.pinSize).attr(pinattrs);

To this:

var pin = r.circle(pins[i].xPos, pins[i].yPos, config.pinSize).attr(pinattrs.class);

Class not added with addClass() and Attr() on SVG element

1 Answers1