你如何使用css來設計svg標籤？

Question

我正在嘗試使用內嵌樣式標記來設置我的45個多邊形和5個矩形。 出於某種原因，我嘗試風格的第一個標籤不會選擇造型。如果我在頂部添加第三個形狀，那麼它下面的兩個形狀將被設置爲樣式，如果我刪除了頂部的第三個形狀，那麼它下面的第二個形狀將不會被設置樣式。這之前是否發生過這種情況？

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

現在使用下面的代碼，矩形得到樣式。 （在頂部的第二多邊形標籤）

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