如何使用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>

- cdm89

---

你能为这个设置一个jsfiddle吗？ - miah

你为什么在<style>标签中有一个XML注释？你的实际样式表中是否存在？另外，尝试用CSS注释（而不是XML注释）包装你的CDATA分隔符。还需要查看你的SVG标记。 - BoltClock

@BoltClock 我只是按照网上的手册操作，不太确定它为什么需要，但我看到那是用来做内联样式表的。我也添加了我的标记，谢谢你的帮助。 - cdm89

Answer 1

看起来你的问题只是在 <style> 标签内的注释。如果将它们删除，你的代码就可以正常工作了……请参考这里：

http://jsfiddle.net/thatmichael/tcaTP/

（我更改了填充以使CSS的工作更明显。）

- Michael Stanaland