Cannot Animate a Polygon Created by a Function in SVG.JS

Question

I've written a JavaScript function that creates a triangle (MyFirstTriangle). The triangle displays perfectly as one would expect. However, when I try to apply an animation to the triangle I get the "ReferenceError: MyFirstTriangle is not defined".


function CreateTriangle(Name) {

var Name = draw.polygon("50 15, 100 100, 0 100").fill("#fff").stroke({ width: 0 })

 }

CreateTriangle("MyFirstTriangle");

MyFirstTriangle.animate(4000, '<>', 500 * i).rotate(30 * i);

When I create the same triangle directly (as in, not through a function), then the animation works perfectly. Are there some inherent limitations regarding the use of functions with SVG.JS?

score 0 · Answer 1 · answered Jan 16 '21 at 21:31

This is not how programming works. You call the function CreateTriangle with the Parameter MyFirstTriangle but you are not using this parameter in the function. Instead you are creating a new local variable with the name Name which overwrites the parameter you passed. Whatever you save in Name is then lost at the end of the function because you return nothing.

A working example would work somehow like this:

function CreateTriangle() {

   return draw.polygon("50 15, 100 100, 0 100").fill("#fff").stroke({ width: 0 })

 }

const MyFirstTriangle = CreateTriangle();

MyFirstTriangle.animate(4000, '<>', 500 * i).rotate(30 * i);

Cannot Animate a Polygon Created by a Function in SVG.JS

1 Answers1