Question

我想在一个应该跨越该表的多行的html表中插入一个svg-image。我该怎么做？

这就是我现在所拥有的：

但我想生产这样的东西：

我的svg-rects应跨越多行的每一个表列：

这是我的代码：

<!doctype html>
<html>
<head>
<style>

body {
     position: absolute;
}

svg {
    stroke:rgb(0,0,0);
    stroke-width:2;
    border:1px solid black;
    position:abolsute;
    z-index:10;
}

svg > rect.firstrect {
    fill: rgb(234,145,234);
    stroke:#006600;
}

svg > rect.secondrect {
    fill: rgb(123,11,234);
    stroke:#006600;
}

svg > rect.thirdrect {
    fill: rgb(11,234,98);
    stroke:#006600;
}

table {
    border:1px solid black;
    border-collapse:collapse;
    width:55%;
    height:55%;
    margin-top:10px;
    z-index:20;
}

td,th {
    border:1px solid black;
    padding:2px;
    width:250px;
    height:25px;
    font-weight:bold;
    text-align:center;
}

td.withsvg{
    position: relative;
}
</style>
</head>
<body>



<table>
    <tr>
        <th >23.04</th>
        <th>24.04</th>
        <th>ProfilNr</th>
        <th>Schnitt</th>
    </tr>
    <tr>
        <td>03:37</td>
        <td>11:35</td>
        <td>19:13</td>
        <td>21:46</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td class='withsvg'>
        <!--    <svg width="250px" height="250px">
                <rect class='firstrect' x="0" y="100" height="150" width="100%"/>
                <rect class='secondrect' x="25" y="150" height="100" width="80%"/>
                <rect class='thirdrect' x="50" y="200" height="50" width="60%"/>
            </svg> -->
        </td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
        <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
        <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>


</table>


</body>
</html>

Answer 1

你必须使用＆lt; div＆gt;能够与行大小进行交互。

可悲的是，它使代码更复杂，但你必须使用这种语法：

<td class='withsvg'>
      <div class="content">
        <svg>
            <rect class='firstrect' x="0" y="0" height="50" width="100%"/>
            <rect class='secondrect' x="35" y="3" height="150" width="50%"/>
            <rect class='thirdrect' x="43" y="6" height="120" width="40%"/>
        </svg>
      </div>
    </td>

代码与您的代码相同，我刚刚添加了＆lt; div＆gt;你的＆lt; rect＆gt;周围。

以下是示例：js fiddle

如何将svg插入跨越多行的hml表中

1 个答案: