How to reference an SVG drawing primitive with Keith Woods SVG Plugin

How to reference an SVG drawing primitive with Keith Woods SVG Plugin

Hi folks,
here's a code snippet that will generate a nice Lissajous figure using Keith Wood's SVG plugin. I can't figure out how I can change the points in the polyline primitive once it has been instantiated. I would think that I need to change line 12 to something like var mypolyline =  svg.polyline(myarray, .....); and then later change the point array with svg.change(mypolyline, {points: newarray}); but this is bombing out.

Here's a fiddle with the working code:  https://jsfiddle.net/782386ec/


What am I doing wrong?

Pug McThug



  1. $(function() {$('#svgintro').svg({onLoad: drawIntro})});

  3. canvas = {width: 700, height: 700} ;
  4. first = 7 ;
  5. second = 9 ;

  7. function drawIntro(svg) { 
  8.   var myarray = new Array(1000) ;
  9.   for (i=0; i<myarray.length; i++) {
  10.     myarray[i] = [(Math.sin(first*i)*canvas.width/2)+canvas.width/2,(Math.sin(second*i)*canvas.height/2)+canvas.height/2];
  11.     } 
  12.   svg.polyline(myarray, {fill: 'none', stroke: 'black', strokeWidth: 1});
  13. }