svg 多边形点 - Javascript - 不工作

Question

如何通过JavaScript控制svgpolygon的点数？尝试以这种方式解决它，但它不起作用。

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

我已经更改了输出多边形，使其看起来与起始多边形不同，否则看起来代码没有执行任何操作。

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');

svg 多边形点 - Javascript - 不工作

svg Polygon Points - Javascript - Not Working

javascript

svg

polygon