CODEWITHSUNDEEP
javascripthtmlcss
Moswers
Moswers

Reputation: 45

How to place svg on top of an svg?

I'm filling a table with svg line, svg circle, or both at the same time. the problem is when I fill a cell with a line + a circle the line is under the circle not on top. so how can I fix this?

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

Upvotes: 1

Views: 1271

Answers (1)

segFault
segFault

Reputation: 4054

You could absolutely position your svg tags and place them on top of each other.

For example:

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>

Upvotes: 2

Related Questions