Как вставить svg в таблицу hml, которая охватывает несколько строк

Я хочу вставить svg-изображение в html-таблицу, которая должна охватывать несколько строк этой таблицы. Как мне это сделать?Как вставить svg в таблицу hml, которая охватывает несколько строк

Вот что я сейчас:

Но я хочу, чтобы произвести что-то вроде этого:

Мои SVG-прямоугольникам должен охватить за один стол-колонки по нескольким строки:

Это мой код:

<!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>

источник

2016-05-09 Hakan Kiyar

Чтобы иметь возможность взаимодействовать с вашим размером строки, вы должны использовать div <div>.

К сожалению, это делает код более сложным, но вы должны использовать этот вид синтаксиса:

<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>

код является такой же, как у вас, я просто добавил <DIV> вокруг < прямоугольнику >.

Вот пример: js fiddle

источник

2016-05-09 12:24:36 Relisora

вы можете дать мне более подробный пример? –

Мне нужно лучшее понимание вашего вопроса. На вашем результирующем снимке вы сделали 2 примера или первый прямоугольник нужно разделить на два столбца с разными столбцами? Если это не расщепление, то где же 3-я прямая? Вы зафиксировали их ширину в первом примере, а в ваших изображениях результата они имеют разную ширину. Нужно ли им адаптироваться к ширине ячейки? Цветовой код был бы лучше между кодом и результатом, чтобы понять ваш вопрос. – Relisora

Да, это два примера: в каждом столбце также должен быть третий прямоугольник, но я забыл рисовать .... ширина первого прямоугольника должна быть шириной ячейки или колонки, второй прямоугольник должен быть половина ширины первой и третьей половины второго и т. д. –

Как вставить svg в таблицу hml, которая охватывает несколько строк

ответ

Смежные вопросы