SVG/JavaScript：尝试 select 并更改多边形点

Question

我正在尝试 select 并使用 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>

这是处理第2个多边形点调整的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) 上我返回 "undefined"。使功能整体失效。

我做错了什么？非常感谢任何帮助和反馈。

谢谢！

Answer 1

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

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

来源：Microsoft SVGPointList documentation

SVG/JavaScript：尝试 select 并更改多边形点

SVG/JavaScript: Trying to select and change polygon point

javascript

safari

svg

google-chrome

ipad