1

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

<!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。）

4

0 回答 0