javascript - 在 HTML 中点击加载 SVG 文件？

Question

我想通过单击在 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？

Answer 1

这个怎么样？该代码本质上只是显示/隐藏给定的 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";
    }
}