PointC Posted June 22, 2020 Share Posted June 22, 2020 I'm writing up a tutorial on dynamically creating SVG elements and need to verify something about the attr plugin. Do hyphenated attributes always need to be a string when setting the value? Using camelCase for hyphenated CSS properties works just fine as they get converted. But something like textAnchor remains camelCase when applied to the element. This is true of all hyphenated SVG attributes. It seems I can use camelCase outside of the attr:{} wrapper and it will work, but that results in style="text-anchor: middle;". // works gsap.set("#a", { attr: { "text-anchor": "middle" } }); //doesn't work gsap.set("#b", { attr: { textAnchor: "middle" } }); // works but results in an inline style gsap.set("#c", { textAnchor: "middle" }); This has always perplexed me a bit and the attr docs don't specifically mention it so I need to ask for the sake of tutorial accuracy. See the Pen 50ae88fdd620d2848f5d978934a994d7 by PointC (@PointC) on CodePen 1 Link to comment Share on other sites More sharing options...
OSUblake Posted June 23, 2020 Share Posted June 23, 2020 You must use attributes exactly as they appear on the element. 4 hours ago, PointC said: It seems I can use camelCase outside of the attr:{} wrapper and it will work, but that results in style="text-anchor: middle;". That's setting CSS, and CSS properties can be camel cased. All presentation attributes can be set with CSS, and CSS will override any attributes. https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation gsap.set("#c", { attr: { "text-anchor": "start" }, textAnchor: "middle" // WINS! }); 3 Link to comment Share on other sites More sharing options...
OSUblake Posted June 23, 2020 Share Posted June 23, 2020 In cool browsers, you can set stuff like cx, cy, r, etc with CSS. 😲 #circle { r: 10; cx: 200; cy: 200; } See the Pen e43d9e6812c484ff6e57c9624ddc91c2 by osublake (@osublake) on CodePen 1 Link to comment Share on other sites More sharing options...
OSUblake Posted June 23, 2020 Share Posted June 23, 2020 Just now, OSUblake said: In cool browsers Be sure to try out the new Edge browser. It's my favorite on Mac and Windows. Link to comment Share on other sites More sharing options...
PointC Posted June 23, 2020 Author Share Posted June 23, 2020 28 minutes ago, OSUblake said: That's setting CSS, and CSS properties can be camel cased. Yep, understood. I guess I was just wondering if there would be some 'under the hood' magic from GSAP to allow the use of camelCase and it would make the conversion for us. If you create a text element and then use GSAP to set x, y and the text-anchor, the x and y don't need to be strings. It works fine if they are though. I don't know if it'd be better to put all the attributes in quotes for consistency. Maybe that would make more sense to someone new? I dunno. 17 minutes ago, OSUblake said: Be sure to try out the new Edge browser. It's my favorite on Mac and Windows. Never heard of it. Just updated, but haven't done much testing yet. I'll give it a spin. Link to comment Share on other sites More sharing options...
OSUblake Posted June 23, 2020 Share Posted June 23, 2020 32 minutes ago, PointC said: If you create a text element and then use GSAP to set x, y and the text-anchor, the x and y don't need to be strings. Technically the names end up as strings, you just don't have to put quotes around the name if its a valid identifier or number. Quote Property names are string or Symbol. Any other value, including a number, is coerced to a string. This outputs 'value', since 1 is coerced into '1'. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors#Property_names 32 minutes ago, PointC said: It works fine if they are though. I don't know if it'd be better to put all the attributes in quotes for consistency. Maybe that would make more sense to someone new? I dunno. Hm... I can see how that might be confusing for a tutorial. I'd go with showing CSS whenever possible. I'm pretty sure that all the non-presentation attributes for SVG are camel cased e.g. viewBox. Please correct me if I'm wrong. I didn't go through all of them. I'm just going off of memory. I know x and y are a little different for attributes, but I probably wouldn't bring it up. Just make them use gsap's x and y transforms. 1 Link to comment Share on other sites More sharing options...
OSUblake Posted June 23, 2020 Share Posted June 23, 2020 9 minutes ago, OSUblake said: I'm pretty sure that all the non-presentation attributes for SVG are camel cased e.g. viewBox. The reason being that those attributes are also properties on the element. var svg = document.querySelector("#svg"); console.log(svg.viewBox.baseVal); The only exception I know of is that d isn't a property of a path element because it was supposed to get reworked for SVG 2, but that's kind of been stalled. 🤷♂️ 2 Link to comment Share on other sites More sharing options...
OSUblake Posted June 23, 2020 Share Posted June 23, 2020 3 hours ago, PointC said: I guess I was just wondering if there would be some 'under the hood' magic from GSAP to allow the use of camelCase and it would make the conversion for us. And, I don't think gsap does any conversion between the different cases because it's not necessary. CSS can be set using camelCase. element.style.backgroundColor = "blue"; Or kebab case. element.style.setProperty("background-color", "blue"); But that still doesn't change the fact that attributes have to be an exact match. 4 Link to comment Share on other sites More sharing options...
PointC Posted June 23, 2020 Author Share Posted June 23, 2020 8 hours ago, OSUblake said: And, I don't think gsap does any conversion between the different cases because it's not necessary. ahh... of course. That's makes perfect sense now that you mention it. Why did I always assume GSAP was doing something for us there? 🤷♂️ Good assist Blake. Please send your invoice to Professor @Jonathan as I have him on retainer for all my CSS needs and he didn't pop into the thread. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now