How do I add coordinates to an SVG polyline?

Question

How do I add coordinates to an existing SVG polyline with JavaScript?

<svg height="240" width="700" id='svg'>
    <polyline points="0, 240 40, 25 60, 40 80, 120 120, 140 200, 180 500, 120 600, 5" style="fill:none;stroke:#000;stroke-width:3" />
</svg>

I am using IE 9 (in a .hta file) and need to be able to dynamically append new points to the polyline. The goal is to be able to create a line graph. I apologize in advance, I have absolutely no idea how to reference this attribute. Any guidance for this would be greatly appreciated.

Answer 1

var polyline= document.getElementById('polyline-id')
  , points = polyline.getAttribute('points');

points += '12, 23'; // example
polyline.setAttribute('points', points );

may not work if the polyline is already rendered, so you need to use setAttributeNS: https://developer.mozilla.org/en-US/docs/Web/API/Element.setAttributeNS and getAttributeNS: https://developer.mozilla.org/en-US/docs/Web/API/Element.getAttributeNS

an another option is to use some library like http://www.svgjs.com/ or http://snapsvg.io/

Answer 2

If you add an id attribute to the polyline so that it looks like this

<polyline id="polyline-id" points="0, 240 40, 25 60, 40 80, 120 120, 140 200, 180 500, 120 600, 5" style="fill:none;stroke:#000;stroke-width:3" />

you can get a reference to it via document.getElementById

The simplest way is to manipulate it via getAttribute/setAttribute on the "points" attribute

var points = polyline.getAttribute("points");
points += "10, 20";
polyline.setAttribute(points);

but the highest performance option is the SVG DOM as that avoids serialising the points data to/from a string - all UAs I know of store the data internally as an array of floats or doubles rather than a string.

var svg = document.getElementById('svg');
var point = svg.createSVGPoint();
point.x = 10;
point.y = 20;
var polyline= document.getElementById('polyline-id');
polyline.points.appendItem(point);