SVG.js error on animating path plot

Question

I'm trying to animate a path using SVG.js but it keeps showing this error:

Uncaught TypeError: Object m774.042297,414.434357c-4.302734,0 -9.586304,-3.046783 -11.741272,-6.771179l-15.146057,-26.174835c-2.154968,-3.724365 -2.154968,-9.817963 0,-13.542328l15.146057,-26.174835c2.154968,-3.724396 7.438538,-6.771179 11.741272,-......t'

Here's my jsfiddle: http://jsfiddle.net/jaZ3C/

HTML

<div id="drawing"></div>

Javascript

    var draw = SVG('drawing').viewbox(0, 0, 1600, 706);

var hexagon = draw.path('m789.13208,375.361206c-0.019592,0 -0.04364,-0.013855 -0.053406,-0.030792l-0.068848,-0.119019c-0.009827,-0.016937 -0.009827,-0.044647 0,-0.061584l0.068848,-0.119019c0.009766,-0.016937 0.033813,-0.030792 0.053406,-0.030792l0.137817,0c0.019592,0 0.04364,0.013855 0.053406,0.030792l0.068848,0.119019c0.009827,0.016937 0.009827,0.044647 0,0.061584l-0.068848,0.119019c-0.009766,0.016937 -0.033813,0.030792 -0.053406,0.030792l-0.137817,0z')
    .fill('#000');
hexagon.animate(500, '<>', 0).plot('m774.042297,414.434357c-4.302734,0 -9.586304,-3.046783 -11.741272,-6.771179l-15.146057,-26.174835c-2.154968,-3.724365 -2.154968,-9.817963 0,-13.542328l15.146057,-26.174835c2.154968,-3.724396 7.438538,-6.771179 11.741272,-6.771179l30.317444,0c4.302673,0 9.586243,3.046783 11.741211,6.771179l15.146057,26.174835c2.154968,3.724365 2.154968,9.817963 0,13.542328l-15.146057,26.174835c-2.154968,3.724396 -7.438538,6.771179 -11.741211,6.771179l-30.317444,0z');

Can someone help me point out what's wrong here?

I'm not sure what you want to animate. But that should be done with the pathArray (and the support for that is still under development to my knowlage). Also, you seem to have some syntax problem in your path string. Check out https://github.com/wout/svg.js#svgpatharray or https://github.com/otm/svg.path.js for a more easy syntax instead of trying to create the strings by your self. — Nils, Apr 07 '14 at 19:09
@Nils my path string (in the animate().plot()) was pasted from svg file and it showed perfectly when I opened that svg file and even when I used that string for drawing a path (draw.path(...)) instead of trying to animate to (animate().plot(...)). I don't think it's syntatically wrong to svg standard, but maybe it's a svg.js bug for not recognizing a correct path string? — KwiZ, Apr 08 '14 at 02:31

score 1 · Answer 1 · answered Apr 08 '14 at 19:40

It is not possible to morph paths in svg.js at the moment. It's a feature that is coming in the future. How ever you can animate other properties, please see https://github.com/wout/svg.js#animatable-method-chain for the available methods.

In SVG.js you can morph pointArrays (and hopefully pathArrays soon). Please see https://github.com/wout/svg.js#morph-2 for more information.

I fixed your jsfiddle so it works, except for the "animate" part. Please let me know if I have understood your question.There where several problems with the fiddle. First there seems to be some problem with the long string in jsfiddle, so I had to split it. Then the actual path is really small, please note that the svg is 300px by 300px and the used viewport is only 1px by 1px, that is 300 times magnification. Also, the way you included svg.js (as an external file), instead you should choose svg.js from "Frameworks & Extensions"

http://jsfiddle.net/jaZ3C/1/

var draw = SVG('drawing').size(300, 300).viewbox(789, 375, 1, 1);

var str = 'm789.13208,375.361206' +
    'c-0.019592,0 -0.04364,-0.013855 -0.053406,-0.030792' +
    'l-0.068848,-0.119019' +
    'c-0.009827,-0.016937 -0.009827,-0.044647 0,-0.061584' +
    'l0.068848,-0.119019' +
    'c0.009766,-0.016937 0.033813,-0.030792 0.053406,-0.030792' +
    'l0.137817,0' +
    'c0.019592,0 0.04364,0.013855 0.053406,0.030792' +
    'l0.068848,0.119019' +
    'c0.009827,0.016937 0.009827,0.044647 0,0.061584' +
    'l-0.068848,0.119019' +
    'c-0.009766,0.016937 -0.033813,0.030792 -0.053406,0.030792' +
    'l-0.137817,0' +
    'z';

var hexagon = draw.path(str).fill('#000');

thanks for your effort, but I had no problem drawing the path but just problem animating it. The tiny original path was my intention, because I wanted to make it grow from almost nothing. Anyway, I have dropped the requirement to animate it, so it's not needed anymore — KwiZ, Apr 21 '14 at 16:40

Fuzzyma · Answer 2 · 2017-05-26T14:49:27.217

0

Thats an old question but just for he records: You can animate paths with svg.js now. Just use the svg.pathmorphing.js extension

EDIT: Simple animations (when all path commands are from the same type) are event implemented in the core now

edited May 26 '17 at 14:49

answered Feb 14 '16 at 21:58

Fuzzyma

7,619
6
28
60

SVG.js error on animating path plot

2 Answers2