如何使 child 在 parent 边界外可见（拖动 SVG 多边形点时）

Question

我有一个 parent-div，我在里面画了 SVG 多边形。

功能就像，我应该能够在任何地方抓取和拖动多边形点（工作正常）。如果有任何机会，我们尝试移动并在 parent-div 的一侧放置一个点，parent-div 将自动调整大小（如预期的那样）。

问题是，当我尝试将点移出 parent-div 的一侧时，多边形形状的一部分被剪掉了。 OR 该点在移出 parent 边界时显然不可见，因为 SVG 是 parent-div 的 child。

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

是否可以显示点（被拖出 parent div 的一侧）？我虽然也玩 Z-Index 但我不知道如何玩 SVG-z-index.

如果可能，那怎么做？

我玩过 overflow/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

Answer 1

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

svg {
  overflow: visible;
}

CodePen

如何使 child 在 parent 边界外可见（拖动 SVG 多边形点时）

how to make child visible out of parent boundary (while dragging SVG Polygon point)

javascript

css

polygon

d3.js