Javascript SVG多边形在调整父div大小时闪烁（它应保留实际形状）

注意：我们只需要使用Viewbox概念

---

我有一个div（resizediv），在其中渲染SVG多边形。我应该能够重新排列多边形点（通过拖放它们），或者可以调整resize-div的大小。

场景：1：我应该能够通过将多边形点拖动到任意位置来重新排列它们，并且resize div（父div）将被重新排列/调整大小以容纳其中的所有点工作正常

场景2：完成多边形点的重新排列后，如果尝试调整大小div（父div），整个svg或某些点将闪烁。或者换句话说，在重新排列点之后，如果我双击resize div（父div），整个形状将闪烁

在场景2中，我使用

  arrVertexes = arrVertexes.map(item => {
        return [(xScale.invert(item[0])),  (yScale.invert(item[1])) ];
  });

但对于场景1，我不使用缩放。反转

---

预期的行为是它不应该闪烁。它应该按原样工作

从过去两周以来一直在尝试，但运气不佳。实际应用是不同的。这只是真实应用程序中发生的事情的再现

function resize(){

   arrVertexes = arrVertexes.map(item => {
        return [(xScale.invert(item[0])),  (yScale.invert(item[1])) ];
    });


    const eve = $('.resize-div').style; 
    eveWidth = $('.resize-div').width() - 2;
    eveHeight = $('.resize-div').height() - 2; 
   
    if (width !== eveWidth) {
      width = eveWidth; 
    }

    if (height !== eveHeight) { 
      height = eveHeight;
    }
    
    getScaledPoints();
    reload();
}

---

不知道怎么了。试图将PreserveSpectAction（我不需要）设置为none，但无效。

您的代码乱七八糟。。。我几乎不明白那里发生了什么事

但有一件事要提。此代码位于

getScaledPoints

函数中：

return [Math.round(xScale(item[0])), Math.round(yScale(item[1]))];

应改为：

return [xScale(item[0]), yScale(item[1])];

---

不要在这里进行任何舍入！在处理“缩放”时，应该使用“实数”，而不是“整数”。示例：.

谢谢您的输入，但无法删除。如果这样做，调整父对象的大小将不起作用。我的意思是，当您调整外部div的大小时，内部形状将不会被放大或缩小。要求是，您应该能够将任意点拖到任意位置，根据它，父div的大小将被调整。而且，当您手动调整父div的大小时，它将放大或缩小或放大或缩小多边形…请参见我添加的

.gif

来解释我的意思。如您所见，我首先拖动右下角的点（父div的外侧）。父div将调整大小（以容纳其中的所有点）。然后只需双击或调整父div的大小，点位置就会闪烁。预期的行为是，当我调整div的大小时，它也应该放大/缩小多边形。但它忽隐忽现，我想我找到了解决办法。如果您正在工作，请等待我的输入，不要继续。非常感谢您的输入。看来我们已经解决了这个问题。不过，非常感谢您来到这里检查我们复杂的代码。非常感谢您的努力！