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