v4 error: Cannot set property className of #<SVGElement> which has only a getter

[greghuc]

Hi there,

This is a very short and incomplete bug report for v4.1.5. I did a quick try of v4 in my app (currently on v3.2.2), and I'm seeing some errors. I don't have time right now to give a nice reproduction case, but I thought you might want to know about this error now, as you are actively developing v4..

So the error is "Cannot set property className of #<SVGElement> which has only a getter".

This happens with this code:

    V.svg`<svg class="blaa" xmlns="http://www.w3.org/2000/svg"> ... </svg>`

A quick Google shows up a related Github 2015 issue of this: adobe-webplatform/Snap.svg#414, where someone commented "SVG elements don't seem to respond to setting the className property."

The v4 release notes say "both class and style are handled as special attributes (among aria, data and ref) so that class=${value} now directly set className of the element".

So maybe setting className doesn't work on svgs?

[greghuc]

Also see https://stackoverflow.com/questions/37943006/unable-to-change-class-name-of-svg-element

From comment: "In SVG className is an SVGAnimatedString (not a string). SVGAnimatedString has two main properties baseVal and animVal"

[WebReflection]

to create <svg> you don't use svg tag, you use the html one, as controversial as that sounds, but that's been the case forever in here, because <svg> tags are born into html world, not within the world they don't exist or have meaning (i.e. <svg> inside an <svg>) ... however, I don't mind fixing the class thing for svg tags, yet your code should use html tag to create <svg> nodes, and svg tag to create nodes that would land inside an <svg> tag ... which is nothing really new.

[WebReflection]

@greghuc actually we have a chicken / egg problem there, as indeed even nested attributes would fail with SVG content so the previous hint about using html tag to create SVG is both wrong, broken, or misleading, as svg tag now does the only thing and html can't really dig into its content to understand the node type ... but ... I might release an update pretty soon to do so as that should be relatively trivial.

[WebReflection]

@greghuc yup, just fixed in 4.1.8 so now your use case should be covered. Apologies for both confusion and early error, I knew that already from v3 but somehow forgot about it.

[greghuc]

@WebReflection thanks for looking into this so quickly.

So to be clear, should I be using html or svg to generate an <svg> element with v4.1.8+?

I had just switched all my <svg> generation code to use html (and not svg) with v3.2.2 - and it worked. I understand your point about <svg> elements being in html world.

So I want to be clear before I start testing with v4.1.8 again..

[WebReflection]

@greghuc use svg if you were using svg and everything should be fine