Oddly named SVG element breaking MorphSVG.pathDataToBezier

[gmullinix 5 Likes (Newbie)]

Ran into an interesting bug the other week. I was using DrawSVG to make an element follow an SVG path (technically a polyline), and Morph SVG's pathDataToBezier feature to grab and convert the polyline to path data.

 

I found that if I named my polyline with a specific naming convention, MorphSVG broke. The ID name I used was path_1_1_1 and for some reason the specific sequence of a repeated underscore and a number broke the plugin.

 

The console log reports "ERROR: malformed path data" but the path is fine; it's the _#_#_# name that breaks things.

 

Please see attached Codepen for a demo.

 

Changing my ID name fixed everything but it took a few hours of QA (and baffled coworkers) to resolve. Since I didn't see any online reports of this issue, I figured I'd post here to bring attention to it.

See the Pen YpMKRg by gem0303 (@gem0303) on CodePen

[Dipscom 2,815 Likes (Superhero)]

Thanks for the heads up gmullinix, I'll be passing this over the the overlords, someone will come by with an official comment/update asap.

[GreenSock 8,117 Likes (Superhero)]

Ah, very interesting. Yeah, the issue was that there's some logic in there to sense if the string you're passing in is actually path data (like "M0,0 C3,5...") or selector text. I assumed if there were 3 or more numbers in the string, it's likely path data. But obviously in your case you've got selector text with 3 numbers in it. I've added some extra logic to better sense this type of condition, and you can test it on codepen using this URL for the plugin: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js

 

Let me know if that works for you and I'll add it to the official zips. 

 

Sorry about the extra debugging hassle. Thanks for reporting this. 

[PointC 8,599 Likes (Superhero)]

I've said it many times before and I'll say it again. What a world it would be if other companies responded to requests and bugs as well as GreenSock. A small bug is reported and literally fixed the same day.

 

Amazing! 

[gmullinix 5 Likes (Newbie)]

Apologies for not replying sooner, I was on Christmas break. Looks like the updated MorphSVG code is working perfectly in my Codepen now. Thank you so much for such a quick fix!