在表格的顶部覆盖 SVG

Question

是否可以在可滚动的 tbody 顶部覆盖 SVG 画布？我需要在我的 trs 中的 div 之间画线。如果可以在可滚动的 tbody 上覆盖 SVG 画布，则非常感谢任何示例。以下是我正在使用的表的示例，表溢出是自动的。在此示例中，我试图在“连接 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%;