将 SVG 叠加在表格主体顶部

Question

是否可以将 SVG 画布覆盖在可滚动的 tbody 之上？我需要在我的 trs 中的 div 之间画线。如果可以将 SVG 画布覆盖在可滚动的 tbody 上，那么任何示例都会非常感激。以下是我正在使用的表的示例，表溢出是自动的。在此示例中，我尝试在“连接 1”和“连接 2”之间画一条线，并且当我向左/向右或向上/向下滚动表格时，我希望使该线保持与这两个组件的连接。<table>  <thead>    <tr>      <th>1 </th>      <th>2 </th>      <th>3 </th>    </tr>  </thead>  <tbody>    <svg style="    position: absolute;    width: 100%;    height: 100%;    top: 0;    left: 0;">  <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2"></line></svg>    <tr style="height: 30px;">      <td style="position: absolute; left: 100px;">        <div>Connection 1 </div>      </td>    </tr>    <tr style="height: 30px;">      <td>        <div style="position: absolute; left: 200px;">Connection 2 </div>      </td>    </tr>    <tr style="height: 30px;">      <td>        <div style="position: absolute; left: 400px;">Connection 3 </div>      </td>    </tr>    <tbody></table>

Answer 1

我能够让它工作，我必须去寻找position: relative;并在里面标记<table><tbody><svg><tbody>position: absolute; width: 100%; height: 100%;