title: Toggle svg visibility
body: <p>I'm using html buttons to toggle full screen width SVG images on and off. The images are separate SVG files. By making the SVGs full width, they scale to different landscape dimensions. 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.</p>
  <p>In the simplified example I try and toggle layer02.svg as visible or hidden when I click on a shape defined in layer01.svg.</p>
  <p>Can I call a &quot;toggle&quot; function in the html from an &quot;onclick&quot; in layer01.svg along the lines of:
  &lt;rect x=&quot;10&quot; y=&quot;10&quot; width=&quot;40&quot; height=&quot;40&quot; onclick=...</p>
  <p>Maybe I'm barking up the wrong tree. Any help appreciated!</p>
  <p>html:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;html&gt;
      &lt;head&gt;
      &lt;style&gt;
      .layer{
        position: absolute;
        left: 0px;
        top: 0px;  
        width:100%;
        visibility: hidden;
      }
      #controlLayer{
        visibility: visible;
      }
      &lt;/style&gt;
  
      &lt;script type="text/javascript"&gt;
        function toggleLayer(){
          var svgLayer = document.getElementById("layer02");
          if (window.getComputedStyle(svgLayer).visibility === "hidden") {
              svgLayer.style.visibility='visible';
          } else {
             svgLayer.style.visibility='hidden';
          }
        }
      &lt;/script&gt;
  
      &lt;/head&gt;
  
      &lt;body&gt;
        &lt;embed id="controlLayer" class="layer" src="layer01.svg" &gt;
        &lt;embed id="layer02" class="layer" src="layer02.svg" &gt;
      &lt;/body&gt;
      &lt;/html&gt;   </code></pre>
  </div>
  </div>
  </p>
  <p>layer01.svg:</p>
  <pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
  &lt;svg width=&quot;1920&quot; height=&quot;890&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 508 235.48&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; &gt;
  
  &lt;g stroke-width=&quot;.79375&quot;&gt;
  &lt;rect x=&quot;10&quot; y=&quot;10&quot; width=&quot;40&quot; height=&quot;40&quot; fill=&quot;#ff0&quot; onclick=&quot;toggleLayer()&quot;/&gt;
  &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  <p>layer02.svg:</p>
  <pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
  &lt;svg width=&quot;1920&quot; height=&quot;890&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 508 235.48&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt; 
   &lt;rect x=&quot;193.1&quot; y=&quot;30.167&quot; width=&quot;138.47&quot; height=&quot;171.17&quot; fill=&quot;#f00&quot; stroke-width=&quot;.79375&quot;/&gt;
  &lt;/svg&gt;
  </code></pre>