javascript - SVG Polygon transition -

i'm trying make transition of svg <polygon> element.

the codepen here: http://codepen.io/anon/pen/vlqokr

i have polygon this:

<svg width="300" height="200" viewbox="0 0 300 200"> <polygon points="0 0, 145 0, 150 20, 155 0, 300 0, 300 200, 0 200, 0 0" /> </svg>

now, when change value of points attribute, can see change reflected in browser.

my goal here use transition (e.g. transition: 2s ease 0s) see animation of change.

is doable in way?

it attached codepen, when click button, points value being replaced transition animation doesn't work.

thanks, karol

you can use css animation on attributes designated css "properties". points not 1 of - @ least not yet.

you can animate smil animation features of svg.

<svg width="300" height="200" viewbox="0 0 300 200">    <polygon points="">      <animate attributetype="xml" attributename="points"               dur="2s" repeatcount="indefinite"               values="0 0, 145 0, 150 20, 155 0, 300 0, 300 200, 0 200, 0 0;                       0 0, 145 0, 150 50, 155 0, 300 0, 300 200, 0 200, 0 0;                       0 0, 145 0, 150 20, 155 0, 300 0, 300 200, 0 200, 0 0"               keytimes="0; 0.5; 1"                calcmode="spline"               keysplines=".5 0 .5 1;                           .5 0 .5 1" />    </polygon>  </svg>

here specifying 3 keyframes: start, end, , start. easing, there 2 keysplines values, 1 each direction of travel.

manual triggering

if need able manually control animation - such per example. can have 2 different <animate> elements. 1 each direction. can trigger each animation calling beginelement(). can find out more here.

ie support

unfortunately, smil animation not work in ie. need use fakesmile js library add support ie.

or use 1 of js svg libraries, snapjs, raphaeljs etc. of them have cross-browser animation functions.

or animation :)

or, of course, interpolation of path yourself. instead of setting y coord either 20 or 50, use timeout or requestanimationframe change in steps.