SVG textPath and textLength quick tip

[PointC 8,599 Likes (Superhero)]

Hey everyone,

 

I just spent some time fighting with MS Edge so I though I'd post a quick tip about it. I needed to pull some SVG text from a center point and stretch the spacing to the edge of a rectangle. Easy enough I thought. I'll use text-anchor="middle" and tween the textLength to the width of the rectangle. That worked perfectly in Chrome, but Edge wasn't in the mood to play nice.

 

I won't bore you with all the details, but basically Edge will correctly use the middle text anchor for initial setup. However, when you try to animate textLength along with that attribute, it reverts back to text-anchor="start' so the letters won't space apart correctly. They'll all space out from the left. Not good.

 

Edge also has a problem reporting back the textLength for an animation start point. I opted to use the BBox of the text to get a starting point for GSAP to animate the textLength. To overcome the anchor problem, I centered the text BBox and then animated it to x:0 while the textLength animates which will give the illusion of spacing from the center.

 

See the Pen oqPxYr by PointC (@PointC) on CodePen

While on the subject of textLength, I came across another little oddity last week. I often animate SVG text along a textPath by tweening the startOffset attribute, but I thought I'd try adding some textLength with it to space out the letters a bit and found some strangeness. When you set your initial textLength attribute, Firefox only works with that on the actual text element, but Chrome only works with that attribute being set on the textPath element. A bit odd.

 

Here's a quick demo showing the behavior. I used two tweens on the timeline so you can easily comment out either if you want to see the weirdness. The animation along the path works no matter what, but the textLength attribute placement is a bit fussy between Chrome and FF.

 

See the Pen vRzmeO by PointC (@PointC) on CodePen

Of course, Edge doesn't work at all no matter where you put the attribute. Big surprise.   It will animate along a path just fine, but when you use a textPath element it doesn't seem to care about textLength. 

 

Hopefully this helps anyone trying to do some interesting SVG text animations. If anyone needs me I'll be over at the MS campus protesting their fussy browsers. 

 

Happy tweening everybody.

 

[GreenSock 8,117 Likes (Superhero)]

Very interesting, Craig! Clever. Thanks for sharing the insights. Dropping some "GreenShock" bombs yourself, huh?  

[OSUblake 9,990 Likes (Superhero)]

You probably have enough quick tips to write your own book. 

[OSUblake 9,990 Likes (Superhero)]

I think that is an Edge bug. I'm getting incorrect values here.

console.log(text.textLength.baseVal.value)
console.log(text.textLength.baseVal.valueInSpecifiedUnits)
console.log(text.getAttribute("textLength"))

 

Might want to report it.

 

[PointC 8,599 Likes (Superhero)]

7 hours ago, OSUblake said:

You probably have enough quick tips to write your own book. 

 

Hehe. I actually post these tips because at my age I'll almost certainly forget about them and then 12 months from now I'll encounter the same problem. A quick Google search for a solution will lead me right back to my own thread. It's pure genius. 

 

Yeah, I also tried each of those methods you listed to get the textLength value from Edge and found the same problem. Filing a bug report is on my list of things to get done.

[OSUblake 9,990 Likes (Superhero)]

1 minute ago, PointC said:

Yeah, I also tried each of those methods you listed to get the textLength value from Edge and found the same problem. Filing a bug report is on my list of things to get done.

 

I hate filing bugs. I usually just cross my fingers and hope @Jonathan did it already.

[PointC 8,599 Likes (Superhero)]

How's this?

 

Dear Microsoft,

This has been my experience working with your Edge browser.

 

 

Please fix it. Thank you. 

[OSUblake 9,990 Likes (Superhero)]

Put that on Twitter. I'd be curious to see if and how they would respond to that.

[Sahil 2,541 Likes (Superhero)]

Quote

You probably have enough quick tips to write your own book. 

 

Both of you start writing your books, otherwise someday I will do it using your posts. Without royalty, just credits at the end. And your contact information so my readers can contact you for queries.

 

Quote

Put that on Twitter. I'd be curious to see if and how they would respond to that.

 

In case you guys haven't seen it,

 

 

[Jonathan 5,176 Likes (Superhero)]

 

1 hour ago, Sahil said:

In case you guys haven't seen it,

 

i'm surprised during that Microsoft presentation that Chrome didn't install as well, since Chrome has taken the mantle as the new IE.