v4 error: Cannot set property className of #<SVGElement> which has only a getter
greghuc opened this issue · comments
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?
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"
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.
@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.
@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.
@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..
@greghuc use svg
if you were using svg
and everything should be fine