如何使孩子在父边界之外可见（在拖动 SVG 多边形点时）答案

【问题标题】：how to make child visible out of parent boundary (while dragging SVG Polygon point)如何使孩子在父边界之外可见（在拖动 SVG 多边形点时）
【发布时间】：2020-11-04 06:02:14
【问题描述】：

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

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

问题是，当我尝试将点移出父 div 的一侧时，多边形形状的部分被剪裁了。或该点在移出父边界时显然不可见，因为 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

【问题讨论】：

标签： javascript css d3.js polygon

【解决方案1】：

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

svg {
  overflow: visible;
}

CodePen

【讨论】：

就是这么简单。感谢您指出。为了实现这种行为，我多次愚弄自己。