-3

ポリゴンの上にテキストを配置したい。残念ながら、テキストは形状の後ろになります 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>
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 に答える