不能在多边形顶部动态地放置文字

Question

我想将文字放在我的多边形顶部。不幸的是，文字背后的形状是否有类似于css z索引的东西？

这里是我的html中的svg的一部分（它的很多代码，因为我绘制地图，所以这里只是它的一小部分。）尽管下面它们都有相同的坐标，我原来把它们放在在铬中使用检查员的形状，但形状保持在文本上方。

<svg width="400" height="800" viewBox="0 0 400 800" id="svg-doc"> 

<rect id="central-park" class="shape" x="154" y="370"width="53" height="127" /> 
    <a xlink:href="/zipcodes/16"> 
     <rect id="z10024" class="shape" x="68" y="415" width="85" height="40" /> 
     <text x="0" y="15" fill="#5df8b8">10024</text> 
    </a> 
    <a xlink:href="/zipcodes/17"> 
     <rect id="z10023" class="shape" x="68" y="457" width="85" height="40" /> 
     <text x="0" y="15" fill="#5df8b8">10024</text> 
    </a> 
    <a xlink:href="/zipcodes/10"> 
     <polygon id="z10034" class="shape" points="189,156 137,122 106,121 101,129 99,155 79,155 78,105 94,79 121,67 128,82 163,61 177,62 191,80" /> 
     <text x="0" y="15" fill="#5df8b8">10024</text> 
    </a> 
    <a xlink:href="/zipcodes/28"> 
     <polygon id="z10040" class="shape" points="188,167 186,155 137,122 108,122 102,126 100,153 77,156 77,166" /> 
     <text x="0" y="15" fill="#5df8b8">10024</text> 
    </a> 
    <a xlink:href="/zipcodes/29"> 
     <polygon id="z10033" class="shape" points="189,166 187,197 187,203 81,203 77,194 78,166" /> 
     <text x="0" y="15" fill="#5df8b8">10024</text> 
    </a> 

Answer 1

根据该站点：http://alignedleft.com/tutorials/d3/an-svg-primer/

的元件，其中被编码决定了它们的深度顺序的顺序。

事实上，问题似乎是你的所有文本都在同一个地方，在（0,15） - 不在多边形之下？

我编辑的代码从问题到文本上的多边形移动，它可以正确显示...

<svg width="400" height="800" viewBox="0 0 400 800" id="svg-doc"> 

<rect id="central-park" class="shape" x="154" y="370"width="53" height="127" /> 
    <a xlink:href="/zipcodes/16"> 
     <rect id="z10024" class="shape" x="68" y="415" width="85" height="40" /> 
     <text x="70" y="450" fill="#5df8b8">10024</text> 
    </a> 


    <a xlink:href="/zipcodes/17"> 
     <rect id="z10023" class="shape" x="68" y="457" width="85" height="40" /> 
     <text x="70" y="480" fill="#5df8b8">10023</text> 
    </a> 


    <a xlink:href="/zipcodes/10"> 
     <polygon id="z10034" class="shape" points="189,156 137,122 106,121 101,129 99,155 79,155 78,105 94,79 121,67 128,82 163,61 177,62 191,80" /> 
     <text x="90" y="110" fill="#5df8b8">10034</text> 
    </a> 


    <a xlink:href="/zipcodes/28"> 
     <polygon id="z10040" class="shape" points="188,167 186,155 137,122 108,122 102,126 100,153 77,156 77,166" /> 
     <text x="120" y="160" fill="#5df8b8">10040</text> 
    </a> 


    <a xlink:href="/zipcodes/29"> 
     <polygon id="z10033" class="shape" points="189,166 187,197 187,203 81,203 77,194 78,166" /> 
     <text x="120" y="190" fill="#5df8b8">10033</text> 
    </a> 
</svg>