如何使子项在父边界之外可见拖动SVG多边形点时

问题描述

我有一个parent-div，并且在其中绘制了SVG多边形。

该功能就像，我应该能够在任意位置抓取并拖动一个多边形点（工作正常）。如果我们有机会尝试将一个点移到父级div的外侧，父级div将自动调整大小（如预期）。

问题是，当我尝试将指针移出父级div的一侧时，多边形形状的一部分会被剪切。 OR ，因为SVG是parent-div的子代，所以该点显然移出父边界时不可见。

我想要的是，被拖动到父div一侧的点（和多边形形状）应该可见。

是否可以显示点（被拖动到父div的一侧）？我虽然也可以使用Z-Index，但是我不知道如何使用SVG-z-index。

如果可能的话，怎么办？

我使用了溢出/ z-index属性，但是由于某些原因它没有起作用。

<div style="width:100px;
            height:100px;
            left: 400px;
            top: 100px;
            position: relative;" 
     
            class="resize-div" >
    
   <svg height="100%" width="100%">
     <g class="polygon"></g>  
   </svg>
  
  
</div>

.css

svg {
  position:relative;
}
.resize-div {
  border: 1px solid black;
  padding: 4px;
  resize: both;
}
.polygon {
  stroke: yellow;
  stroke-width: 10;
  fill: red;
}

DEMO Application

解决方法

在SVG上使用overflow:visible。删除应用于SVG的剪辑。

svg {
  overflow: visible;
}

CodePen

javascript polygon