切换 svg 可见性答案

【问题标题】：Toggle svg visibility切换 svg 可见性
【发布时间】：2021-02-16 11:42:05
【问题描述】：

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

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

我可以从 layer01.svg 中的“onclick”调用 html 中的“toggle”函数吗？

也许我找错树了。任何帮助表示赞赏！

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>

【问题讨论】：

请编辑问题并分享minimal reproducible example？
使用编辑器工具栏上的 [ ] 按钮将您的代码转换为我们可以玩的 SO sn-p
我已将 html 放入 sn-p - 不确定如何处理 SVG

标签： javascript html svg

【解决方案1】：

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

对我来说，使用元素 id 来引用是最容易的。

希望下面的sn-p能帮到你：

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>

【讨论】：

感谢您的回复。我的 SVG 位于与 html 页面不同的文件中——我认为这是我的困难所在。这是一个使用 html 按钮的示例。我的想法是用带有可点击区域的 SVG 替换 html 按钮面板来进行切换。但是那么如何从 SVG 文件中调用 html 页面中的函数呢？

【解决方案2】：

因为您使用的是visibility: hidden，所以您的#controlLayer 位于z-index 中#layer02 的下方，并且实际上无法点击——#controlLayer 基本上被不可见的#layer02 覆盖。我已将 SVG 直接带入下面的代码中以进行功能演示。您的 SVG 非常庞大，我已更改宽度/高度以显示在提供的空间中。

此外，Chrome88 会给出Uncaught ReferenceError: toggleLayer is not defined 错误。我无法找到嵌入 SVG 的文档，但假设它们的功能类似于 iframe，它们可能无法访问包含您的脚本和函数的 DOM。

<style>
.layer{
  position: absolute;
  left: 0px;
  top: 0px;  
  width:100%;
  visibility: hidden;
}
#controlLayer{
  visibility: visible;
}
</style>
<!-- <embed id="layer02" class="layer" src="layer02.svg"> -->
<svg width="508" height="235.48" version="1.1" viewBox="0 0 508 235.48" xmlns="http://www.w3.org/2000/svg" id="layer02" class="layer"> 
<rect x="193.1" y="30.167" width="138.47" height="171.17" fill="red" stroke-width=".79375"/>
</svg>
<!-- <embed id="controlLayer" class="layer" src="layer01.svg" > -->
<svg width="508" height="235.48" version="1.1" viewBox="0 0 508 235.48" xmlns="http://www.w3.org/2000/svg" id="controlLayer" class="layer">
<rect x="10" y="10" width="40" height="40" fill="blue" onclick="toggleLayer()"/>
</svg>
<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>

【讨论】：

是的 - 感谢 z-order 的提示 - 如果我将我的“按钮面板”SVG 与 html 对齐并使用 z-order 将其保持在顶部，我可以调用html 中的 javascript 函数来切换其他外部 SVG 的可见性。