Jump to content
Search Community

SVG text on a path - stopped working?

kabocreative test
Moderator Tag

Go to solution Solved by Carl,

Recommended Posts

Hi all,

 

So I created a nice simple animated jump link with text rotating on an SVG path. Got it up on the site and moved on.

 

It has stopped working, both on the site and the original codepen.

 

Inspecting I can see now instead of the TextPath rotating, the path itself is.

 

Any ideas greatly appreciated :)

See the Pen QWrLVpy by kabocreative (@kabocreative) on CodePen

Link to comment
Share on other sites

Hi,

 

Thanks a bunch for the demo.

 

I'm not sure I am understanding the issue. The text seems to be rotating fine. 

 

Your <path> has an ID of "circle-text-path"

<path id="circle-text-path" d="M 400 250 A 150 150 0 0 1 250 400 A 150 150 0 0 1 100 250 A 150 150 0 0 1 250 100 A 150 150 0 0 1 400 250 Z" ></path>

 

And your tween is targeting that path and rotating it

 

tl.to("#circle-text-path", {
  rotate: 360, transformOrigin: "50% 50%", repeat: -1, duration: 10, ease: "none"
})

 

GSAP seems to be doing exactly what it should and I'm pretty sure targeting the actual <path> and not the <textPath> is the way you should do it.

 

I forked your demo, removed gsap and tried to modify the <textPath> via css and it didn't seem to have any affect

 

textPath, {
  stroke:red;
  stroke-width:2px;
  transform:translateX(200px) scale(4);
}

 

See the Pen MWGYzNM?editors=0100 by snorkltv (@snorkltv) on CodePen

 

Again, it looks like your demo is working fine. If you are expecting other behavior or you can show something that doesn't work we can look into it further.

  • Like 2
Link to comment
Share on other sites

Ooh how strange. You are seeing what I used to see.

 

When you responded with a polite 'eh.... it's doing what you want....' I took a look on my wife's machine (mac) and ta-da it is indeed doing what I want!

On her iPhone and Mac (multiple browsers) it's working.

On my windows (chrome + firefox) and android (chrome) the path is rotating and not the text as per this loom:

 

https://www.loom.com/share/c33f2d1718c24875ae55e04d69190e89

 

I'm now assuming it must be me, but would LOVE it if you happen to be android or windows and can confirm?

 

Now to figuring out what on earth I've done to my setup 🤔

  • Like 1
Link to comment
Share on other sites

  • Solution

thanks for the video. I don't have any windows / android devices.

 

In the demo below I'm rotating the <text> element. Does that give more consistent results?

 

See the Pen oNdgJVd by snorkltv (@snorkltv) on CodePen

 

@GreenSock may be able to shed more light on this, but please understand the company and support staff may be observing holiday hours today

 

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Yeah, I think some browsers just don't render transforms on textPath or textSpan elements because they're considered "inline" (same for <span> elements). It's totally unrelated to GSAP. With the newer SVG2 spec, it seems some browsers are shifting to support it. 

https://lists.w3.org/Archives/Public/www-svg/2016Jan/0010.html

 

In short, I wouldn't recommend doing it if you want 100% browser support. Do what Carl showed. Or wrap it in a <g>. 👍

  • Like 4
Link to comment
Share on other sites

Thanks Jack. Good lesson to learn now!

 

Listened to a podcast you were on yesterday funnily enough where you mentioned the pain of cross browser support in the days of shifting from flash to JS, especially when it comes to SVG.. and the same day I hit such an issue. Live and learn!

Link to comment
Share on other sites

18 hours ago, kabocreative said:

Thanks Jack. Good lesson to learn now!

 

Listened to a podcast you were on yesterday funnily enough where you mentioned the pain of cross browser support in the days of shifting from flash to JS, especially when it comes to SVG.. and the same day I hit such an issue. Live and learn!

Ha! That's great. Which podcast? Just curious. Must be pretty old! Indeed, the days of switching from Flash to JS were crazy. 🤯

  • Like 1
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...