Wie man eine Svg über andere Svg mit Z-Index

platzieren Ich habe einige Svgs Zähne zeigen, und ich möchte eine Brücke zwischen zwei ihnen zu zeichnen.Wie man eine Svg über andere Svg mit Z-Index

Ich habe den nächsten in der Fiddle-Link versucht, aber die Brücke ist abgeschnitten.

Ich habe viele Zähne in Design und die Brücke kann an anderen Stellen zwischen zwei Zähnen gemalt werden.

Jeder Zahn kann andere bemalte Bereiche haben, und ich brauche den Z-Index, um die Brücke zwischen zwei Zähnen zu schweben, wobei die Originale erhalten bleiben.

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

Quelle

2017-12-22 Luiz Alves

Der Grund, warum die Klammern Clipping sind, weil Sie eine svg 50x50 gelegt. Kein Weg wird in der Lage sein, darüber nachzudenken.

Sie haben zwei Möglichkeiten:

ein svg machen, dass das Everthing enthält. Ich würde empfehlen, so etwas wie Tintenauswahl oder Illustrator zu verwenden, damit es funktioniert.
hinzufügen seperate svg für jede Klammer

Hoffentlich, lassen Sie mich hilft, wenn Sie irgendwelche Fragen haben

Quelle

2017-12-22 16:41:40 Stephen

Wie man eine Svg über andere Svg mit Z-Index

Antwort

Verwandte Themen