z-indexを使って他のsvgにsvgをかける方法

Question

私は歯を見るためにいくつかのsvgを持っていますが、私は2つの間にブリッジを描きたいと思います。

私はフィドルリンクで次を試しましたが、ブリッジがクリップされています。

私はデザインに多くの歯を持ち、ブリッジは2つの歯の間の他の場所で塗装することができます。

それぞれの歯は他の塗装された領域を持つことができます。オリジナルを保存する2つの歯の間にブリッジを浮かせるためにz-インデックスを使用する必要があります。

.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

あなたはSVGの50×50を置いているため、中括弧がクリッピングされている理由があります。道は行くことができません。

1. がeverthingが含まれている1つのSVGを作成します。

   次の2つの選択肢があります。私は を使ってインクスペースやイラストレーターのようなものを使用することをお勧めします。

2. は、ご質問があれば私に知らせて、

がうまくいけば、このことができます各ブレースのために別々のSVGを追加