Question

我想把文字放在我的多边形之上。不幸的是，文字背后的形状是否有类似于css z索引？

这里是我的html中的svg的一部分（它的很多代码因为我正在绘制地图所以这里只是它的一小部分。）虽然下面它们都有相同的坐标，但我最初将它们放在了使用chrome中的检查器进行形状，但形状仍保留在文本上方。

<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>

无法在多边形顶部动态放置文本

1 个答案: