Invalid value for path d errors in Chrome and Safari

Question

Invalid value for path d errors in Chrome and Safari

tylersticka opened this issue 9 years ago · comments

Hi, @bendc! I ran into a quirk using this (otherwise awesome) library, I'm not sure how to troubleshoot further and figured it might be time to create an issue for it.

I have an SVG illustration of my face (my avatar, actually), and I'm animating its d attribute so that one of the eyes morphs from an open eye to a closed eye.

I can get the animation working using SMIL in Chrome, Firefox and Safari just fine. When I try to do the same animation using animateplus, it works great, but Chrome and Safari report console errors when the animation completes.

Error in Chrome:

animate.min.js:17
Error: Invalid value for <path> attribute d="M103.5,82.4c0,2-3.8,3.9-7.6,3.7c-4.6-0.2-6.4-2-6.4-4.1c0-1.6,1.62.3,72.3C100.3,84.3,103.5,81.3,103.5,82.4z"

Error in Safari:

animate.min.js:17
Error: Problem parsing d="M103.5,82.4c0,2-3.8,3.9-7.6,3.7c-4.6-0.2-6.4-2-6.4-4.1c0-1.6,1.62.3,72.3C100.3,84.3,103.5,81.3,103.5,82.4z"

You can reproduce the problem in this pen I've created: http://codepen.io/tylersticka/pen/b2f6b448692ed74d9d6565ea49ff6849

My first instinct was that my coordinates must not match up... maybe there are odd numbers or something. But I created the second by duplicating the first shape and moving its points around, and a visual inspection of the d attribute seems to support that the points are equal.

So otherwise, I'm stumped! In order of likelihood, I imagine the problem might be...

I did something stupid that you'll identify.
Blink and Webkit are doing something stupid.
There's a legitimate issue with the library.

Thanks in advance for your help! 😬

Benjamin De Cock · Answer 1 · Tue Aug 11 2015 04:24:12 GMT+0800 (China Standard Time)

Hey Tyler,

Your first instinct was actually correct! Animate Plus expects the same number of characters in your start and end values, which isn't the case in your example. This issue can unfortunately often happen if you minify your SVG paths so I'll make sure to clarify that in the docs!

Thanks,
Ben

Tyler Sticka · Answer 2 · Tue Aug 11 2015 04:28:25 GMT+0800 (China Standard Time)

Hi @bendc,

Thanks for looking into the issue!

So I've exported these assets from Illustrator, and I don't have any minification settings applied (and I haven't run this through svgo or any other compression tools). How would I go about formatting these attributes in a manner that would work?

I recognize at this point that I'm asking for advice that goes beyond "the library is broken," but Google is failing me. If the answer is "I don't know, good luck," that's fair, too. Thanks again.

Benjamin De Cock · Answer 3 · Tue Aug 11 2015 06:40:24 GMT+0800 (China Standard Time)

I'm not too familiar with Illustrator (I use Sketch) so I'm afraid I won't be able to help you :( Try maybe by exporting simpler shapes to figure out what's happening ¯_(ツ)_/¯

Tyler Sticka · Answer 4 · Tue Aug 11 2015 07:44:27 GMT+0800 (China Standard Time)

Tried that already! I'll try building a new asset in Sketch and compare the output. 🎲

Tyler Sticka · Answer 5 · Tue Aug 11 2015 07:49:51 GMT+0800 (China Standard Time)

FWIW, exporting the assets from Sketch resulted in different d attributes that do not result in the error. Solution found! Thanks. 👍

Alex Martin · Answer 6 · Fri Dec 23 2016 06:40:49 GMT+0800 (China Standard Time)

If anyone else comes across this having the same issues and is using Illustrator. You'll need to export the svg. (Export for Screens) For some reason, if you edit an svg and just hit save it gives odd path values that cause errors here. Jerk Adobe!