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.

score 15 · Accepted Answer · edited Dec 04 '20 at 10:36

15

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";
points.setAttribute("points", 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);

edited Dec 04 '20 at 10:36

user692942

16,398
7
76
175

answered Sep 07 '14 at 08:14

Robert Longson

118,664
26
252
242

found out for IE 9 (.hta files) needs to be .createSVGPoint(); http://msdn.microsoft.com/en-us/library/ie/ff972165%28v=vs.85%29.aspx – TK421 Sep 11 '14 at 02:03
For all UAs actually. I fixed that typo in the answer. – Robert Longson Sep 11 '14 at 06:24
1

@RobertLongson I am just getting the 'polyline.points is undefined' error, and I create the element with document.createElementNS('http://www.w3.org/2000/svg', 'svg') – ii iml0sto1 Sep 18 '18 at 14:43
2

The third line needs to be `polyline.setAttribute('points', points);` – Jordan Aug 18 '19 at 04:08

score 4 · Answer 2 · edited May 27 '15 at 12:26

4

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/

edited May 27 '15 at 12:26

Robert Longson

118,664
26
252
242

answered Sep 07 '14 at 03:02

Nik Terentyev

2,270
3
16
23

1

The sentence beginning *may not work* is incorrect. The initial suggestion will work whether the polyline is rendered or not. setAttributeNS is likely to lead down the wrong path since the attribute is in the null namespace. – Robert Longson Sep 07 '14 at 07:59
Thank you so much! am going to use svgjs, makes things a ton easier! – TK421 Sep 07 '14 at 09:40
yeah, i prefer svg.js too. dislike that snap sets drag&drop coordinates with transfer-property – Nik Terentyev Sep 07 '14 at 22:21
thanks, @RobertLongson. your suggestions/corrections are always welcome! – Nik Terentyev Sep 07 '14 at 22:22

How do I add coordinates to an SVG polyline?

2 Answers2

Linked