SVG/JavaScript：尝试选择和更改多边形点

Question

我正在尝试使用 JavaScript 选择和更改下面多边形形状中的第二个点。我的意图是根据浏览器宽度水平移动它，以便它指向我整体设计中的某些东西。

<svg viewBox="0 0 100 10" preserveAspectRatio="none" height="100px" width="100%">
  <polygon id="wedge" points="100,1 38,10 0,1 0,0 100,0"></polygon>
</svg>

这是处理第二个多边形点调整的JavaScript函数：

var wedge = document.getElementById('wedge');
var browserWidth = window.innerWidth;
var contentWidth = 960;
var margin = 80;

function wedgeAdjust() {
  var breakpoint = contentWidth + (2 * margin);

  if (browserWidth > breakpoint) {
    wedge.points[1].x = (((browserWidth - contentWidth) / 2) / browserWidth) * 100;
  } else if (browserWidth <= breakpoint) {
    wedge.points[1].x = (margin / browserWidth) * 100;
  }
}

当页面加载和浏览器调整大小时触发该函数（调整大小时首先更新 browserWidth 变量）。

我的问题是： 在 chrome 中一切正常，但在我的 iPad (Safari) 上，什么也没有发生。我尝试像这样添加警报：

alert(wedge.points);

这在两个浏览器中都给了我“[Object SVGPointList]”。但是，当我将其更改为我想要更改的特定点时，事情变得有趣了：

alert(wedge.points[1]);

这在 chrome 中为我提供了以下内容：[Object SVGPoint]（这很酷，因为它可以让我更改 x 值）。但在 iPad (Safari) 上，我返回“未定义”。使函数作为一个整体失败。

我做错了什么？任何帮助和反馈将不胜感激。

谢谢！

Answer 1

wedge.points 是 SVGPointList 类型的对象，它似乎不支持标准的下标访问 ([ ])。

您应该使用wedge.points.getItem(1) 而不是wedge.points[1]。

来源：Microsoft SVGPointList documentation