Snap.svg: Invalid value for attribute points...

It seems the newest version 0.4.1 doesn’t allow to animate a polygon’s “points” attribute.

var s = Snap(400, 620);
var pol = s.polygon([0, 464, 0, 464, 111.6, 464, 282.5, 464, 457.4, 464, 613.4, 464, 762.3, 464, 912.3, 464, 1440.1, 464, 0, 464]);
pol.animate(
  { points: [0, 464, 0, 367, 111.6, 323.3, 282.5, 373, 457.4, 423.8, 613.4, 464, 762.3, 464, 912.3, 464, 1440.1, 464, 0, 464] },
  1000)

It errors with ‘Error: Invalid value for <polygon> attribute points=“0”’

I got it working with version 0.3.0. So some change must have broken this behavior

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 21 (4 by maintainers)

Most upvoted comments

been learning snapsvg and just spent 2 hours banging my head on the wall with this issue to only uncover it from a stackoverflow comment all the way at the bottom. – http://stackoverflow.com/questions/29732802/animating-points-in-a-polygon-with-snap-svg?rq=1

can we escalate this pr merge, truly pain for those coming to svg and trying to learn and out of the box this is an issue.

mgan59 on Jun 3, 2016

This ever getting fixed?

OpticNectar on Sep 30, 2016

Btw, I was just answering a question on this error on Stackoverflow which I think is probably related http://stackoverflow.com/questions/34991254/animate-polygon-points-snap-svg , you can get around it I think just by using a default Animation, rather than an element animation. So it would look something like this…

Snap.animate( myStartingPointsArray, myEndingPointsArray, 
    function( val ){ 
      myPolygon.attr({ points: val })
    }, 
  2000)

or a plugin…

Snap.plugin( function( Snap, Element, Paper, global ) {
   Element.prototype.polyAnimate = function( destPoints, duration, easing, callback ) {
   var poly = this;
    Snap.animate( this.attr('points'), destPoints,  
       function( val ){ poly.attr({ points: val }) }, duration, easing, callback)
    };
});

https://jsfiddle.net/ian_b/ocg3t9yz/5/

ibrierley on Jan 25, 2016