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

SVG/JavaScript: Trying to select and change polygon point

本文关键字：多边形 选择 JavaScript SVG      更新时间：2023-09-26

我正试图用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）上，我被返回"未定义"。使整个功能失效。

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

谢谢！

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

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

来源：Microsoft SVGPointList文档

相关文章：