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";
    }
}

单击HTML加载SVG文件？

1 个答案: