z- 인덱스를 사용하여 다른 svg 위에 svg를 배치하는 방법

나는 치아를 보여줄 svg가 있으며 두 개 사이에 다리를 그리는 것이 좋습니다.z- 인덱스를 사용하여 다른 svg 위에 svg를 배치하는 방법

나는 바이올린 링크에서 다음을 시도했지만 다리가 잘립니다.

저는 많은 치아가 디자인되어 있고 다리는 두 개의 치아 사이의 다른 장소에 칠해질 수 있습니다.

각 치아에는 다른 칠한 부분이있을 수 있으며 원본을 보존하는 두 개의 치아 사이에서 다리를 부양하려면 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 : 당신이 SVG의 50 × 50를 배치하기 때문에 중괄호가 클리핑되어 http://jsfiddle.net/3wd1fg0v/1/

출처

2017-12-22 Luiz Alves

이유입니다. 그 길은 아무 것도 할 수 없을 것입니다.

이 모든게을 포함하는 하나의 SVG합니다

당신은 두 가지 선택이있다. 을 사용하여 잉크 스페이스 나 일러스트 레이터 같은 것을 사용하는 것이 좋습니다.
당신이 어떤 질문이 있으면 알려 주시기,

는 희망이 도움이 각 중괄호에 대한 별도의 SVG를 추가

출처

2017-12-22 16:41:40 Stephen

z- 인덱스를 사용하여 다른 svg 위에 svg를 배치하는 방법

답변

관련 문제