2

クリックして外部SVGファイルをHTMLページにロードしたい。

今私はJavaScriptを使用しています：

<script language="javascript">
  <!--
  var state = 'none';
  function showhide(layer_ref) {
      if (state == 'block') {
          state = 'none';
      }
      else {
          state = 'block';
      }
      if (document.all) { //IS IE 4 or 5 (or 6 beta)
          eval( "document.all." + layer_ref + ".style.display = state");
      }
      if (document.layers) { //IS NETSCAPE 4 or below
          document.layers[layer_ref].display = state;
      }
      if (document.getElementById &&!document.all) {
          hza = document.getElementById(layer_ref);
          hza.style.display = state;
      }
  }
  -->
</script>

私のSVGをスクリーニングするには：

<a href="#1" onclick="showhide('div1');">Show/hide Alignment</a>                
<div id="div1" style="display: none;" name="1">
  <object type="image/svg+xml" data="1.svg">1 svg file missing</object>
</div>

この方法は機能しますが、スクリーニングしなくても、すべてのSVGファイルをロードする必要があります。

クリックして表示したときにのみSVGをロードする方法はありますか？

4

1 に答える 1

3

これはどう？コードは基本的に、指定されたを表示/非表示にしdivます。さらに、divが初めて表示されるかどうかを確認します。その場合、SVGオブジェクトがロードされます（つまり、JSで作成され、DOMに追加されます）。

HTML

<a href="#" onclick="showhide('div1', '1.svg');">Show/hide Alignment</a>
<div id="div1" style="display: none;"></div>

JS

function showhide(id, svg) {
    var element = document.getElementById(id);
    if (element.style.display == "none") {
         // Check if SVG object already loaded; if not, load it now
         if (!element.getElementsByTagName("object").length) {
             var object = document.createElement("object");
             object.type = "image/svg+xml";
             object.data = svg;
             element.appendChild(object);
        }
        element.style.display = "block";
    }
    else {
        element.style.display = "none";
    }
}
于 2012-10-11T15:42:10.433 に答える