Question

我想通过添加/删除外部div的类来隐藏/显示SVG的一部分（以及其他一些元素）。这似乎不适用于跨浏览器。示例doc：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>webkit non-cascading svg</title>
    <style type="text/css">
      #shape1, #ul1
      {
          display: none;
      }
      #shape2, #ul2
      {
          display: none;
      }

      .show #shape1, .show #ul1
      {
          display: inline-block;
      }
      .show #shape2, .show #ul2
      {
          display: inline-block;
      }
    </style>
  </head>
  <body>
    <div>
      <p>This svg should be hidden:</p>
      <svg width="100" height="100">
        <g id="shape1">
          <rect x="0" y="0" width="40" height="20" fill="yellow" stroke="black" stroke-width="3" />
        </g>
      </svg>
      <p>This ul should be hidden:</p>
      <ul id="ul1"><li>hidden list</li></ul>
    </div>

    <hr/>

    <div class="show">
      <p>This svg should be shown:</p>
      <svg width="100" height="100">
        <g id="shape2">
          <rect x="0" y="0" width="40" height="20" fill="yellow" stroke="black" stroke-width="3" />
        </g>
      </svg>
      <p>This ul should be shown:</p>
      <ul id="ul2"><li>shown list</li></ul>
    </div>
  </body>
</html>

在http://jsfiddle.net/unhammer/qA3BX/1/可测试 - 它在Firefox和Opera（Presto）中按预期工作，但在Chromium中没有。我的CSS错了，或者这是Chromium中的错误？

（Browsershots.org告诉我Safari的行为就像Chromium。）

webkit没有将样式级联到svg中？

0 个答案: