不能在多邊形頂部動態地放置文字

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>