Description

greghuc

opened on Nov 13, 2023

Issue body actions

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?

Activity

1. greghuc commented on Nov 13, 2023

   

   greghuc

   on Nov 13, 2023

   Author

   More actions

   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"
2. WebReflection commented on Nov 13, 2023

   

   WebReflection

   on Nov 13, 2023

   Owner

   More actions

   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.
3. WebReflection

   closed this as completedin ad0f05con Nov 13, 2023
4. WebReflection commented on Nov 13, 2023

   

   WebReflection

   on Nov 13, 2023

   Owner

   More actions

   @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.
5. WebReflection commented on Nov 13, 2023

   

   WebReflection

   on Nov 13, 2023

   Owner

   More actions

   @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.
6. greghuc commented on Nov 13, 2023

   

   greghuc

   on Nov 13, 2023

   Author

   More actions

   @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..
7. WebReflection commented on Nov 13, 2023

   

   WebReflection

   on Nov 13, 2023

   Owner

   More actions

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

   added a commit that references this issue on Apr 28, 2025

   Fix WebReflection#87 - Do not use smart handlers for SVG attributes

   This issue will close once commit ad0f05c is merged into the 'master' branch.

   ad0f05c

Issue actions