Toggle svg visibility

This is what I’m trying to achieve: example The images are separate SVG files. The buttons that toggle them visible/hidden are in an html page. Works OK, but the button layout doesn’t scale well with the SVGs. My idea was to make a button panel as an SVG with clickable areas that would mimic the html buttons. However I can’t work out a way of calling the javascript toggle function in the html page from the SVG clickable areas. I tried to make a simplified example as below.

In the simplified example I try and toggle layer02.svg as visible or hidden when I click on a shape defined in layer01.svg.

Can I call a "toggle" function in the html from an "onclick" in layer01.svg along the lines of:
<rect x="10" y="10" width="40" height="40" onclick=…

Maybe I’m barking up the wrong tree. Any help appreciated!

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>   

layer01.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>

1 thought on “Toggle svg visibility”

  1. You are quite close. I am actually not sure why it’s not working. Something reproducible is always easier to follow (as mentioned by @evolutionxbox).

    For me it’s easiest to reference with the element id.

    I hope the following snippet can help:

    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>
    Reply

Leave a Comment