search

bendc / animateplus

A+ animation module for the modern web
MIT License
5.96k stars 279 forks source link

Invalid value for path d errors in Chrome and Safari #5

Closed tylersticka closed 9 years ago

tylersticka commented 9 years ago

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...

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

Thanks in advance for your help! :grimacing:

bendc commented 9 years ago

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

tylersticka commented 9 years ago

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.

bendc commented 9 years ago

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 ¯(ツ)/¯

tylersticka commented 9 years ago

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

tylersticka commented 9 years ago

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

AnalogMemory commented 7 years ago

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!