使用 svg.js 更改 SVGPointList 长度

Question

嗨，我正在使用函数createPoint使用GSAP来动画多边形。 我还会使用svg.js

如果我使用vanilla javaScript获取SVG的点，

var polygon = document.querySelector("polygon");
var points = polygon.points;

，并返回3点，与运行createPoint函数的次数相对应。登录为：

0: SVGPoint {x: 105.30396270751953, y: 143.0928955078125}
1: SVGPoint {x: 348.09027099609375, y: 97.7249984741211}
2: SVGPoint {x: 276.54010009765625, y: 327.56372070}

如果我使用svg.js代码

const draw = SVG().addTo('body')
var svg = draw.node;
const polygon = draw.polygon().node;
var points = polygon.points;

相同的函数，则记录4个svgpoints的列表，第一个点为{x：0，y：0}，即使我只运行3次功能。附加（索引0）SVG点来自哪里？预先感谢

0: SVGPoint {x: 0, y: 0}
1: SVGPoint {x: 93.79865264892578, y: 124.19292449951172}
2: SVGPoint {x: 346.3572082519531, y: 97.5942153930664}
3: SVGPoint {x: 227.08517456054688, y: 269.97042846

以下HTML

<svg>
<polygon points="">
</svg>

和以下代码

TweenLite.defaultEase = Sine.easeInOut;
const draw = SVG().addTo('body')
var svg = draw.node;
const polygon = draw.polygon().node;
var points = polygon.points;
console.log('points',points)
var offset = 75;

createPoint(100, 100);
createPoint(300, 100);
createPoint(300, 300);
// createPoint(100, 300);

function createPoint(x, y) {
  
  var minX = x - offset;
  var maxX = x + offset;
  var minY = y - offset;
  var maxY = y + offset;
  
  var point = points.appendItem(svg.createSVGPoint());
  point.x = x;
  point.y = y;
  
  moveX();
  moveY();
  
  function moveX() {

    TweenLite.to(point, random(2, 4), {
      x: random(minX, maxX),
      delay: random(0.5),
      onComplete: moveX
    });
  }
  
  function moveY() {

    TweenLite.to(point, random(2, 4), {
      y: random(minY, maxY),
      delay: random(0.5),
      onComplete: moveY
    });
  } 
}

function random(min, max) {
  if (max == null) { max = min; min = 0; }
  if (min > max) { var tmp = min; min = max; max = tmp; }
  return min + (max - min) * Math.random();
}

Answer 1

刚刚发现，通过将一个空数组添加到多边形IE中，

const polygon = draw.polygon([]).node

它可以删除默认的{x：0，y：0}对象。不要问我为什么:)