How can I control the points of a svg polygon via JavaScript? Tried solving it this way, but it does not work.

function points() {
  document.getElementById("polygon").points = "0,100 0,0 100,100";
}

<svg width="100" height="100">
  <polygon id="polygon" points="0,0 100,0 100,100" style="fill:#000;">
</svg>
  
<input type="button" onClick="points" value="Change Polygon Points">

How can I control the points of a svg polygon via JavaScript? Tried solving it this way, but it does not work.

function points() {
  document.getElementById("polygon").points = "0,100 0,0 100,100";
}

<svg width="100" height="100">
  <polygon id="polygon" points="0,0 100,0 100,100" style="fill:#000;">
</svg>
  
<input type="button" onClick="points" value="Change Polygon Points">

• javascript
• svg
• polygon

Share Improve this question Follow edited Sep 20, 2015 at 13:11 JakeTheSnake asked Sep 20, 2015 at 12:32 JakeTheSnakeJakeTheSnake 2,46433 gold badges1616 silver badges2727 bronze badges 1

• That's basically the same polygon so you'd never know whether the function did anything. – Robert Longson Commented Sep 20, 2015 at 12:38

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

I've changed the output polygon so that it looks different to the starting polygon, otherwise it looks like the code doesn't do anything.

function points() {
  document.getElementById("polygon").setAttribute("points", "100,0 50,0 100,100");
}

<svg width="100" height="100">
  <polygon id="polygon" points="0,0 100,0 100,100" style="fill:#000;">
</svg>
  
<input type="button" onClick="points()" value="Change Polygon Points">

document.getElementById('polygon1').setAttribute('points', '100, 0 50, 0 100, 100');