CODEWITHSUNDEEP
javascriptsvgsvg.js
Francis Hemsher
Francis Hemsher

Reputation: 3488

SVG.js : Shapes extension: animate error

Below is an example that creates at star using SVG.js shapes extension. When I request to animate it from 7 points(spikes) to 10 points(spikes), it generates an error.

Any ideas?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>SVG.js - Shapes Extension: animate error</title>
    <script type="text/javascript" src="//svgDiscovery.com/SVG.js/svg.js"></script>
    <script type="text/javascript" src="//svgDiscovery.com/SVG.js/Plugins/svg.shapes.js"></script>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width">
</head>
<body style='padding:10px;font-family:arial;'>
<center>
<h4>SVG.js - Shapes Extension: animate error</h4>
<table>
<tr>
<td>
<div id="svgDiv" style='background-color:lightgreen;width:400px;height:400px;'></div>
</td>
</tr></table>
<script id=myScript>
//---access the empty DIV---
var mySVG = SVG('svgDiv').size(400, 400);

var myStar = mySVG.polygon().attr({id:'myPolygon',stroke:'blue','stroke-width':3,fill:'yellow'}).star({
  inner:  50
, outer:  100
, spikes: 7
}).move(100,100)

//---creates error---
 myStar.animate().star({ spikes: 10 })
</script>
</body>
</html>

Upvotes: 0

Views: 122

Answers (1)

Fuzzyma
Fuzzyma

Reputation: 8474

So I found the time to update this extension. It is available on bower and as soon as the package-conflict is solved on npm, too.

It now requires version 2 of svg.js and works exactly as you specified

mySVG
  .polygon()
  .ngon()
  .animate()
  .star()

Upvotes: 1

Related Questions