2

我想通过单击在 HTML 页面中加载外部 SVG 文件。

现在我使用 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 回答