时间戳

首页 > 解决方案 > 切换 svg 可见性

javascript - 切换 svg 可见性

问题描述

我正在使用 html 按钮来打开和关闭全屏宽度的 SVG 图像。这些图像是单独的 SVG 文件。通过使 SVG 全宽，它们可以缩放到不同的横向尺寸。工作正常，但按钮布局不适用于 SVG。我的想法是将按钮面板制作为具有可点击区域的 SVG，以模仿 html 按钮。但是，我无法找到从 SVG 可点击区域调用 html 页面中的 javascript 切换函数的方法。我试图做一个简化的例子，如下所示。

在简化示例中，当我单击 layer01.svg 中定义的形状时，我尝试将 layer02.svg 切换为可见或隐藏。

我可以从 layer01.svg 中的“onclick”调用 html 中的“toggle”函数，如下所示： <rect x="10" y="10" width="40" height="40" onclick= ..

也许我在叫错树。任何帮助表示赞赏！

html:

    <html>
    <head>
    <style>
    .layer{
      position: absolute;
      left: 0px;
      top: 0px;  
      width:100%;
      visibility: hidden;
    }
    #controlLayer{
      visibility: visible;
    }
    </style>

    <script type="text/javascript">
      function toggleLayer(){
        var svgLayer = document.getElementById("layer02");
        if (window.getComputedStyle(svgLayer).visibility === "hidden") {
            svgLayer.style.visibility='visible';
        } else {
           svgLayer.style.visibility='hidden';
        }
      }
    </script>

    </head>

    <body>
      <embed id="controlLayer" class="layer" src="layer01.svg" >
      <embed id="layer02" class="layer" src="layer02.svg" >
    </body>
    </html>

层01.svg：

<?xml version="1.0" encoding="UTF-8"?>
<svg width="1920" height="890" version="1.1" viewBox="0 0 508 235.48" xmlns="http://www.w3.org/2000/svg" >

<g stroke-width=".79375">
<rect x="10" y="10" width="40" height="40" fill="#ff0" onclick="toggleLayer()"/>
</g>
</svg>

layer02.svg：

<?xml version="1.0" encoding="UTF-8"?>
<svg width="1920" height="890" version="1.1" viewBox="0 0 508 235.48" xmlns="http://www.w3.org/2000/svg"> 
 <rect x="193.1" y="30.167" width="138.47" height="171.17" fill="#f00" stroke-width=".79375"/>
</svg>

标签： javascripthtmlsvg

解决方案

你很接近。我实际上不确定为什么它不起作用。可重现的东西总是更容易理解（正如@evolutionxbox 所提到的）。

对我来说，最容易使用元素 id 进行引用。

我希望以下代码段可以提供帮助：

function hideSVG() {
  var style = document.getElementById("rect").style.display;
  if (style === "none") document.getElementById("rect").style.display = "block";
  else document.getElementById("rect").style.display = "none";
}
<div class="container">
  <p>Click the blue circle
    <p />
    <svg width="500" height="500">
      <rect id=rect class="shape" width="100" height="100" />
      <circle id=circ class="shape" cx="120" cy="120" r="60" style="fill:rgb(0,0,255)" onclick="hideSVG()" />
</div>

推荐阅读