SVG 다각형 채우기가 텍스트 레이블을 숨김

Question

다각형에 흰색 채우기를 추가 할 때 어떤 이유로 텍스트 요소가 표시되지 않습니다. 위의 텍스트 레이블을 가져 오려면 z- 인덱스를 사용했지만 노력했습니다. 텍스트 요소는 검은 색입니다. 다각형 채우기를 none으로 설정하면 텍스트 레이블이 표시됩니다. (원래 문제에)

내 바이올린 : https://jsfiddle.net/omarel/qznxd4vo/1/

UPDATE : https://jsfiddle.net/omarel/qznxd4vo/5/

<style type="text/css"> 
.st0{fill:red;} 
.st3 {fill:#fff;stroke:#58595B;stroke-miterlimit:10;} 
.st3:hover { 
    fill:red;cursor:pointer; 
} 
</style> 
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="619px" 
     height="587px" viewBox="0 0 619 587" style="enable-background:new 0 0 619 587;" xml:space="preserve"> 

    <g id="labels"> 
     <g> 
      <text transform="matrix(1 0 0 1 459.8574 312.0654)" class="st0">pool</text> 
     </g> 
     <g> 
      <text transform="matrix(1 0 0 1 456.687 178.0654)" class="st0">201</text> 
     </g> 
     <g> 
      <text transform="matrix(1 0 0 1 324.7412 178.0654)" class="st0">202</text> 
     </g> 
     <g> 
      <text transform="matrix(1 0 0 1 241.1572 178.0654)" class="st0">203</text> 
     </g> 
     <g> 
      <text transform="matrix(1 0 0 1 181.8091 178.0654)" class="st0">204</text> 
     </g> 
     <g> 
      <text transform="matrix(1 0 0 1 117.1631 178.0654)" class="st0">205</text> 
     </g> 
     <g> 
      <text transform="matrix(1 0 0 1 459.9531 65.0654)" class="st0 ">206</text> 
     </g> 
     <g> 
      <text transform="matrix(1 0 0 1 343.7593 65.0654)" class="st0">207</text> 
     </g> 
     <g> 
      <text transform="matrix(1 0 0 1 229.0552 65.0654)" class="st0">208</text> 
     </g> 
     <g> 
      <text transform="matrix(1 0 0 1 117.9531 65.0654)" class="st0">209</text> 
     </g> 
     <g> 
      <text transform="matrix(1 0 0 1 31.687 65.0654)" class="st0">210</text> 
     </g> 
     <g> 
      <text transform="matrix(1 0 0 1 69.3291 270.0654)" class="st0">211</text> 
     </g> 
     <g> 
      <text transform="matrix(1 0 0 1 67.8833 345.0654)" class="st0 st1 st2">212</text> 
     </g> 
     <g> 
      <text transform="matrix(1 0 0 1 127.2993 440.5654)" class="st0 st1 st2">213</text> 
     </g> 
     <g> 
      <text transform="matrix(1 0 0 1 198.4512 440.5654)" class="st0 st1 st2">214</text> 
     </g> 
     <g> 
      <text transform="matrix(1 0 0 1 302.3052 440.5654)" class="st0 st1 st2">215</text> 
     </g> 
     <g> 
      <text transform="matrix(1 0 0 1 401.0952 440.5654)" class="st0 st1 st2">216</text> 
     </g> 
     <g> 
      <text transform="matrix(1 0 0 1 522.4014 440.5654)" class="st0 st1 st2">217</text> 
     </g> 
     <g> 
      <text transform="matrix(1 0 0 1 21.6973 444.0654)" class="st0 st1 st2">218</text> 
     </g> 
     <g> 
      <text transform="matrix(1 0 0 1 66.5952 548.5654)" class="st0 st1 st2">219</text> 
     </g> 
     <g> 
      <text transform="matrix(1 0 0 1 204.7412 548.5654)" class="st0 st1 st2">220</text> 
     </g> 
     <g> 
      <text transform="matrix(1 0 0 1 325.3833 548.5654)" class="st0 st1 st2">221</text> 
     </g> 
     <g> 
      <text transform="matrix(1 0 0 1 420.437 548.5654)" class="st0 st1 st2">222</text> 
     </g> 
     <g> 
      <text transform="matrix(1 0 0 1 522.853 548.5654)" class="st0 st1 st2">223</text> 
     </g> 
    </g> 
    <g id="units"> 
     <a href="#" class="link"><polygon class="st3" points="404.75,274 404.75,342 436.75,342 436.75,357 465.75,357 465.75,342.75 564.25,334.75 580.5,281.5 
      465.5,272.75 465.75,259.25 436.5,259.25 436.75,274 "/></a> 
     <polygon class="st3" points="593.333,203.333 523,9.333 219.667,20 219.667,31 14.333,31 14.333,201 28.667,201 14.333,399 
      14.333,578 606.333,578 606.333,399.667 432.667,399.667 432.667,392.5 418.75,388.25 399.75,399.5 313.25,399.5 313.25,392.75 
      293.5,388.5 288,399.75 131,399.75 131,200.75 289.25,200.75 289.25,213.5  "/> 
     <polygon class="st3" points="570.747,141.031 512.167,141.031 512.167,139.333 493,139.333 493,120 478.333,120 478.333,122.667 
      461.667,122.667 461.667,143.5 412.667,143.5 412.667,120 386,120 386,210.32 593.333,203.333 "/> 
     <polygon class="st3" points="570.747,141.031 512.167,141.031 512.167,139.333 493,139.333 493,104.167 461.667,104.167 
      461.667,95.5 446.833,95.5 446.833,106.5 415.167,106.5 415.167,13.09 523,9.333 "/> 
     <path class="st3" d="M415.167,106.5"/> 
     <polygon class="st3" points="415.167,13.09 415.167,106.5 344.667,106.5 344.667,104.333 331,104.333 331,106.5 310.333,106.5 
      310.333,95.5 294.333,95.5 294.333,17.375 "/> 
     <polyline class="st3" points="294.333,17.375 294.333,106.5 233.167,106.5 233.167,104.167 219.667,104.167 219.667,106.5 
      201.167,106.5 201.167,95.333 184.667,95.333 184.667,31 219.667,31 "/> 
     <polygon class="st3" points="184.667,95.333 168.083,95.333 168.083,106.5 160.333,106.5 160.333,104.083 146.917,104.083 
      146.917,106.5 78.75,106.5 78.75,80.083 75.917,80.083 75.917,31 184.667,31 "/> 
     <polygon class="st3" points="386,135 368.333,135 368.333,120 322,120 322,122.25 308.5,122.25 308.5,120 303.25,120 
      303.25,130.667 286.417,130.667 286.417,164.5 289.25,164.5 289.25,213.5 386,210.32 "/> 
     <polygon class="st3" points="286.417,130.667 270.25,130.667 270.25,120 258.75,120 258.75,122.25 245.25,122.25 245.25,120 
      218.667,120 218.667,200.75 289.25,200.75 289.25,164.5 286.417,164.5  "/> 
     <polygon class="st3" points="218.667,200.75 154.917,200.75 154.917,171.333 163.583,171.333 163.583,120 181.583,120 
      181.583,122.333 195,122.333 195,120 202.167,120 202.167,131.333 218.667,131.333  "/> 
     <polygon class="st3" points="154.917,200.75 154.917,171.333 163.583,171.333 163.583,131 146.667,131 146.667,122.417 
      131.667,122.417 131.667,146.333 112.5,146.333 112.5,172.833 88.667,172.833 88.667,242.167 131,242.167 131,200.75 "/> 
     <polygon class="st3" points="75.917,31 14.333,31 14.333,201 71.167,201 71.167,172.667 48.417,172.667 48.417,103.75 
      71.667,103.75 71.667,106.5 78.75,106.5 78.75,80.083 75.917,80.083 "/> 
     <polygon class="st3" points="71.167,201 28.667,201 21.513,299.826 59.333,299.826 59.333,297.831 89.917,297.831 89.917,307.914 
      131,307.914 131,242.167 88.667,242.167 88.667,186.331 71.167,186.331 "/> 
     <polyline class="st3" points="88.667,172.667 71.167,172.667 71.167,169.915 69.417,169.915 69.417,124.915 71.917,124.915 
      71.917,119.331 58.25,119.331 58.25,103.75 71.667,103.75 71.667,106.5 146.917,106.5 146.917,104.083 160.333,104.083 
      160.333,106.5 219.667,106.5 219.667,104.167 233.167,104.167 233.167,106.5 331,106.5 331,104.333 344.667,104.333 344.667,106.5 
      461.833,106.5 461.833,104.167 478.25,104.167 478.25,122.667 461.667,122.667 461.667,120 322,120 322,122.25 308.5,122.25 
      308.5,120 258.75,120 258.75,122.25 245.25,122.25 245.25,120 195,120 195,122.333 181.583,122.333 181.583,120 146.75,120 
      146.75,122.417 131.667,122.417 131.667,119.331 88.667,119.331 88.667,172.667 "/> 
     <line class="st3" x1="71.917" y1="122.831" x2="88.667" y2="122.831"/> 
     <line class="st3" x1="112.5" y1="146.333" x2="112.5" y2="119.331"/> 
     <polygon class="st3" points="131,375.625 86,375.625 86,393.125 89.25,393.125 89.25,409 67.625,409 67.625,375.625 
      29.375,375.625 29.375,372.875 16.26,372.875 21.513,299.826 59.333,299.826 59.333,297.831 89.917,297.831 89.917,307.914 
      131,307.914  "/> 
     <polygon class="st3" points="131,375.625 86,375.625 86,393.125 89.25,393.125 89.25,409 84.5,409 84.5,424.5 108.5,424.5 
      108.5,465.75 126.75,465.75 126.75,475 133.875,475 133.875,472.125 147,472.125 147,475 162.625,475 162.625,399.75 131,399.75  
      "/> 
     <polygon class="st3" points="61,475 45.125,475 45.125,425.312 65.75,425.312 65.75,409 67.625,409 67.625,375.625 29.375,375.625 
      29.375,372.875 16.26,372.875 14.333,399 14.333,500.75 52.875,500.75 52.875,487.875 61.001,487.875 "/> 
     <polygon class="st3" points="52.875,500.75 52.875,505.125 87.125,505.125 87.125,515 108.625,515 108.625,487.75 139.875,487.75 
      139.875,499.5 145.75,499.5 145.75,515 142.875,515 142.875,531.5 149,531.5 149,578 14.333,578 14.333,500.75 "/> 
     <polygon class="st3" points="139.875,487.75 202.375,487.75 202.375,499.625 219.25,499.625 219.25,490.5 232.5,490.5 
      232.5,487.75 280,487.75 280,500.75 282.875,500.75 282.875,578 149,578 149,531.5 142.875,531.5 142.875,515 145.75,515 
      145.75,499.5 139.875,499.5 "/> 
     <polygon class="st3" points="162.625,475 219.5,475 219.5,472 232.25,472 232.25,475 242,475 242,464.125 257.375,464.125 
      257.375,399.75 162.625,399.75 "/> 
     <polygon class="st3" points="257.375,464.125 274.875,464.125 274.875,475 285,475 285,472.5 298.125,472.5 298.125,475 
      366.625,475 366.625,399.5 313.25,399.5 313.25,392.75 293.5,388.5 288,399.75 257.375,399.75 "/> 
     <polygon class="st3" points="282.875,500.75 301.875,500.75 301.875,487.75 310.333,487.75 310.333,490.875 323.5,490.875 
      323.5,487.75 366.625,487.75 366.625,527.75 392.25,527.75 392.25,578 282.875,578  "/> 
     <polygon class="st3" points="392.25,527.75 392.25,578 465.5,578 465.5,557 468.375,557 468.375,500.75 451.875,500.75 
      451.875,487.75 439.25,487.75 439.25,490.75 426.125,490.75 426.125,487.75 415,487.75 415,527.75 "/> 
     <path class="st3" d="M392.25,578"/> 
     <polygon class="st3" points="465.5,578 465.5,557 468.375,557 468.375,487.75 505.875,487.75 505.875,490.75 528.25,490.75 
      528.25,475 606.333,475 606.333,578 "/> 
     <polygon class="st3" points="366.625,475 418.375,475 418.375,472.625 431.875,472.625 431.875,475 441.75,475 441.75,464.25 
      458.75,464.25 458.75,399.667 432.667,399.667 432.667,392.5 418.75,388.25 399.75,399.5 366.625,399.5  "/> 
     <polygon class="st3" points="458.75,399.667 606.333,399.667 606.333,475 519.125,475 519.125,472.375 505.75,472.375 505.75,464 
      490.5,464 490.5,475 458.75,475 "/> 
     <polygon class="st3" points="519.125,472.375 519.125,490.75 505.875,490.75 505.875,487.75 439.25,487.75 439.25,490.75 
      426.125,490.75 426.125,487.75 323.5,487.75 323.5,490.875 310.333,490.875 310.333,487.75 232.5,487.75 232.5,490.5 219.25,490.5 
      219.25,487.75 78.375,487.75 78.375,505.125 62.875,505.125 62.875,487.75 61.001,487.75 61.001,475 133.875,475 133.875,472.125 
      147,472.125 147,475 219.5,475 219.5,472 232.25,472 232.25,475 285,475 285,472.5 298.125,472.5 298.125,475 418.375,475 
      418.375,472.625 431.875,472.625 431.875,475 505.875,475 505.875,472.375  "/> 
     <line class="st3" x1="384.339" y1="487.75" x2="384.339" y2="500.625"/> 
     <polyline class="st3" points="366.625,500.625 401.625,500.625 401.625,504 415,504 "/> 
     <line class="st3" x1="401.625" y1="500.625" x2="401.625" y2="487.75"/> 
     <polyline class="st3" points="67.625,475 67.625,472.75 66,472.75 66,425.312 84.5,425.312 84.5,475 "/> 
     <line class="st3" x1="111.875" y1="465.75" x2="111.875" y2="475"/> 
    </g> 
    </svg> 

Answer 1

는 단순히 다각형 위의 텍스트 요소를 이동 : 아래의 정답을 바탕으로,이 업데이트 작업 바이올린입니다

https://jsfiddle.net/mh946reL/

다음과 "units" "labels" 그룹의 순서를 반대로하여

방을 강조 표시 할 때 텍스트가 배경에서 사라지지 않도록 텍스트의 색을 변경하고자 할 수 있습니다.