0
svg-imageをそのテーブルの複数の行にまたがるhtmlテーブルに挿入したいとします。それ、どうやったら出来るの？複数の行にまたがるhmlテーブルにsvgを挿入する方法
しかし、私はこのような何かを生成します：
は、ここで私が今持っているものだ私のSVG-rectsが複数にわたり1テーブルの列ごとにまたがる
を行：
ここに私のコードです：
<!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> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </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> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
あなたは私のより詳細な例を与えることができますか？ –
あなたの質問をよりよく理解する必要があります。あなたの結果の写真では、2つの例を作ったのですか、最初のrectを2つの異なる列に分割する必要がありますか？それが分割されていない場合、3番目のレットはどこに行きましたか？最初の例では幅を固定し、結果の写真では幅を変えました。彼らはセルの幅に適応する必要がありますか？カラーコードは、あなたの質問を理解するためにコードと結果の間に良いでしょう。 – Relisora
ええ、2つの例です：また、各列に3番目の矩形もあるはずですが、私は描画するのを忘れていました....最初の矩形の幅は、セルまたは列の幅にする必要があります2番目の等の最初と3番目の半分の幅の半分。 –