-3

我想将文本放在我的多边形之上。不幸的是，文字在形状后面有什么类似于 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>
4

1 回答 1

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>
于 2013-05-13T02:31:49.983 回答