Как разместить SVG поверх SVG?

Question

Я заполняю таблицу строкой svg, кружком svg или обоими одновременно. проблема в том, что когда я заполняю ячейку линией + кружок, линия находится под кружком, а не сверху. так как я могу это исправить?

<td height="20" width="20" align="center" valign="center" class="col3 row6">
    <svg height="18" width="18">
        <circle cx="9" cy="9" r="6" fill="red"></circle>
    </svg>
    <svg height="20" width="20">
        <line x1="0" y1="9" x2="20" y2="9" style="stroke:red;stroke-width:5"></line>
    </svg>
</td>

Answer 1

Вы можете расположить теги SVG и поместить их друг на друга.

Например:

td {
  position: relative;
}

td svg {
  position: absolute;
  top: 0;
  left: 0;
}

svg.circle {
  left: 1px;
}

<table>
<td height="20" width="20" align="center" valign="center" class="col3 row6">
    <svg class="circle" height="18" width="18">
        <circle cx="9" cy="9" r="6" fill="red"></circle>
    </svg>
    <svg class="line" height="20" width="20">
        <line x1="0" y1="9" x2="20" y2="9" style="stroke:red;stroke-width:5"></line>
    </svg>
</td>
</table>