How to place a svg over other svg using z-index - css

Question

I have some svgs to show teeth, and I´d like to draw a bridge between two them.
I have tried the next in the fiddle link, but the bridge is clipped.
I have many teeth into design and the bridge can be painted in other places between two teeth.
Each tooth can have other painted areas and I need to use z-index to float the bridge between two teeth preserving the originals.
.desabilitado {
fill: black;
stroke: black;
stroke-width: 1px;
opacity: 0.3;
}
.marcadoAzul {
fill: none;
stroke: blue;
stroke-width: 7px;
}
.marcadoVerde {
fill: green;
stroke: black;
stroke-width: 1px;
}
.marcadoMorado {
fill: #CC66CC;
stroke: black;
stroke-width: 1px;
}
.marcadoMarron {
fill: #CC6600;
stroke: black;
stroke-width: 1px;
}
.marcadoAmarillo {
fill: yellow;
stroke: black;
stroke-width: 1px;
}
.marcadoRojo {
fill: red;
stroke: black;
stroke-width: 1px;
}
.marcadoNaranja {
fill: orange;
stroke: black;
stroke-width: 1px;
}
.marcadoTomate {
fill: tomato;
stroke: black;
stroke-width: 1px;
}
.diente {
fill-opacity: 0;
stroke: black;
stroke-width: 1px;
}
.ausente {
fill: none;
opacity: 0;
}
.corona {
fill: none;
opacity: 0;
}
.endodoncia {
fill: none;
opacity: 0;
}
.implante {
fill: none;
opacity: 0;
}
<div>
<svg height="50" width="50" viewBox="0 0 50 50">
<polygon points="10,15 15,10 50,45 45,50" estado="4" value="6" class="ausente" />
<polygon points="45,10 50,15 15,50 10,45" estado="4" value="7" class="ausente" />
<circle cx="30" cy="30" r="16" estado="8" value="8" class="corona" />
<circle cx="30" cy="30" r="20" estado="3" value="9" class="endodoncia" />
<polygon points="50,10 40,10 10,26 10,32 46,32 10,50 20,50 50,36 50,28 14,28" estado="6" value="10" class="implante" />
<g style="z-index:-1">
<defs>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,6 L9,3 z" fill="#f00" />
</marker>
</defs>
<marker id="circle" markerWidth="4" markerHeight="4" refX="2" refY="2">
<circle cx="2" cy="2" r="1" stroke="none" fill="#f00" />
</marker>
<polyline points="45,30 75,30" fill="none" stroke="#000" stroke-width="2" marker-end="url(#circle)" marker-start="url(#circle)" marker-mid="url(#circle)" />
<polyline points="45,25 75,25" fill="none" stroke="#000" stroke-width="2" marker-end="url(#circle)" marker-start="url(#circle)" marker-mid="url(#circle)" />
</g>
<polygon points="10,10 50,10 40,20 20,20" estado="0" value="1" class="diente" />
<polygon points="50,10 50,50 40,40 40,20" estado="0" value="2" class="diente" />
<polygon points="50,50 10,50 20,40 40,40" estado="0" value="3" class="diente" />
<polygon points="10,50 20,40 20,20 10,10" estado="0" value="4" class="diente" />
<polygon points="20,20 40,20 40,40 20,40" estado="0" value="5" class="diente" />
</svg>
<svg height="50" width="50" viewBox="0 0 50 50">
<polygon points="10,15 15,10 50,45 45,50" estado="4" value="6" class="ausente" />
<polygon points="45,10 50,15 15,50 10,45" estado="4" value="7" class="ausente" />
<circle cx="30" cy="30" r="16" estado="8" value="8" class="corona" />
<circle cx="30" cy="30" r="20" estado="3" value="9" class="endodoncia" />
<polygon points="50,10 40,10 10,26 10,32 46,32 10,50 20,50 50,36 50,28 14,28" estado="6" value="10" class="implante" />
<polygon points="10,10 50,10 40,20 20,20" estado="0" value="1" class="diente" />
<polygon points="50,10 50,50 40,40 40,20" estado="0" value="2" class="diente" />
<polygon points="50,50 10,50 20,40 40,40" estado="0" value="3" class="diente" />
<polygon points="10,50 20,40 20,20 10,10" estado="0" value="4" class="diente" />
<polygon points="20,20 40,20 40,40 20,40" estado="0" value="5" class="diente" />
</svg>
<svg height="50" width="50" viewBox="0 0 50 50">
<polygon points="10,15 15,10 50,45 45,50" estado="4" value="6" class="ausente" />
<polygon points="45,10 50,15 15,50 10,45" estado="4" value="7" class="ausente" />
<circle cx="30" cy="30" r="16" estado="8" value="8" class="corona" />
<circle cx="30" cy="30" r="20" estado="3" value="9" class="endodoncia" />
<polygon points="50,10 40,10 10,26 10,32 46,32 10,50 20,50 50,36 50,28 14,28" estado="6" value="10" class="implante" />
<polygon points="10,10 50,10 40,20 20,20" estado="0" value="1" class="diente" />
<polygon points="50,10 50,50 40,40 40,20" estado="0" value="2" class="diente" />
<polygon points="50,50 10,50 20,40 40,40" estado="0" value="3" class="diente" />
<polygon points="10,50 20,40 20,20 10,10" estado="0" value="4" class="diente" />
<polygon points="20,20 40,20 40,40 20,40" estado="0" value="5" class="diente" />
</svg>
<svg height="50" width="50" viewBox="0 0 50 50">
<polygon points="10,15 15,10 50,45 45,50" estado="4" value="6" class="ausente" />
<polygon points="45,10 50,15 15,50 10,45" estado="4" value="7" class="ausente" />
<circle cx="30" cy="30" r="16" estado="8" value="8" class="corona" />
<circle cx="30" cy="30" r="20" estado="3" value="9" class="endodoncia" />
<polygon points="50,10 40,10 10,26 10,32 46,32 10,50 20,50 50,36 50,28 14,28" estado="6" value="10" class="implante" />
<polygon points="10,10 50,10 40,20 20,20" estado="0" value="1" class="diente" />
<polygon points="50,10 50,50 40,40 40,20" estado="0" value="2" class="diente" />
<polygon points="50,50 10,50 20,40 40,40" estado="0" value="3" class="diente" />
<polygon points="10,50 20,40 20,20 10,10" estado="0" value="4" class="diente" />
<polygon points="20,20 40,20 40,40 20,40" estado="0" value="5" class="diente" />
</svg>
<svg height="50" width="50" viewBox="0 0 50 50">
<polygon points="10,15 15,10 50,45 45,50" estado="4" value="6" class="ausente" />
<polygon points="45,10 50,15 15,50 10,45" estado="4" value="7" class="ausente" />
<circle cx="30" cy="30" r="16" estado="8" value="8" class="corona" />
<circle cx="30" cy="30" r="20" estado="3" value="9" class="endodoncia" />
<polygon points="50,10 40,10 10,26 10,32 46,32 10,50 20,50 50,36 50,28 14,28" estado="6" value="10" class="implante" />
<polygon points="10,10 50,10 40,20 20,20" estado="0" value="1" class="diente" />
<polygon points="50,10 50,50 40,40 40,20" estado="0" value="2" class="diente" />
<polygon points="50,50 10,50 20,40 40,40" estado="0" value="3" class="diente" />
<polygon points="10,50 20,40 20,20 10,10" estado="0" value="4" class="diente" />
<polygon points="20,20 40,20 40,40 20,40" estado="0" value="5" class="diente" />
</svg>
</div>
JSFiddle:
http://jsfiddle.net/3wd1fg0v/1/

Answer 1

The reason the braces are clipping is because you placed an svg 50x50. No path will be able to go beyound that.
You have two choices :
Make one svg that contains everthing. I would recommend using
something like inkspace or illustrator to make it work.
Add seperate svg for each brace
Hopefully this helps, let me know if you have any questions