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

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 :

1. Make one svg that contains everthing. I would recommend using something like inkspace or illustrator to make it work.
2. Add seperate svg for each brace

Hopefully this helps, let me know if you have any questions