svg多边形点-Javascript-不起作用

Question

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"> 

Answer 1

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"> 

Answer 2

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