css - cssを使用してsvgタグをどのようにスタイルしますか?

Question

インライン スタイル タグを使用して、45 個のポリゴンと 5 個の四角形のスタイルを設定しようとしています。何らかの理由で、スタイルを設定しようとした最初のタグがスタイリングを反映しません。上部に 3 番目の形状を追加すると、その下の 2 つの形状がスタイルされます。上部の 3 番目の形状を削除すると、その下の 2 番目の形状はスタイルされません。これは以前に誰かに起こったことがありますか？

<style type="text/css"><![CDATA[
      <!--this rectangle will not be styled -->
      rect{
        fill:none;
        stroke:black;
        stroke-width:.5;
      }
      polygon{
        fill:none;
        stroke:black;
        stroke-width:.5;
      }



]]></style>

以下のコードを使用すると、長方形のスタイルが設定されます。(上部にある 2 番目のポリゴン タグを使用)

<style type="text/css"><![CDATA[

  polygon{
    fill:none;
    stroke:black;
    stroke-width:.5;
  }
  rect{
    fill:none;
    stroke:black;
    stroke-width:.5;
  }
  polygon{
    fill:none;
    stroke:black;
    stroke-width:.5;
  }
]]></style>
 <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" />
          <rect id="shape-z10024" class="shape" x="68" y="415" width="85" height="40" />
          <rect id="shape-z10023" class="shape" x="68" y="457" width="85" height="40"  />
          <polygon id="shape-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" />
          <a xlink:href="http://google.com/">
            <polygon id="shape-z10040" class="shape" points="188,167 186,155 137,122 108,122 102,126 100,153 77,156 77,166" />
          </a>
          <polygon id="shape-z10033" class="shape" points="189,166 187,197 187,203 81,203 77,194 78,166" /> 
          <polygon id="shape-z10032" class="shape" points="189,205 160,234 155,248 84,247 80,204" />
          <polygon id="shape-z10030" class="shape" points="268,311 196,315 197,299 157,298 157,273 234,273" />
</svg>