Jump to content
Search Community

setting hyphenated SVG attributes

PointC test
Moderator Tag

Recommended Posts

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

  • Thanks 1
Link to comment
Share on other sites

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!
});

 

  • Like 3
Link to comment
Share on other sites

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

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.

 

 

  • Like 1
Link to comment
Share on other sites

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. 🤷‍♂️

 

  • Like 2
Link to comment
Share on other sites

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.

 

  • Like 4
Link to comment
Share on other sites

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.

  • Haha 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...