由于某种原因，当我向多边形添加白色填充时，文本元素不会显示。我尝试使用z-index将文本标签带到上面，但仍然如此。文本元素是黑色的。如果我将多边形填充设置为无，则文本标签显示。
我的小提琴（原始问题）： https://jsfiddle.net/omarel/qznxd4vo/1/
更新：根据下面的正确答案，这是更新的工作小提琴：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>
答案 0 :(得分：2)
只需移动"units"和"labels"群组的顺序，即可将文字元素移到多边形上方：
https://jsfiddle.net/mh946reL/
您可能希望更改文本的颜色，以便在突出显示房间时它们不会在后台消失。