如何使复选框显示/隐藏 SVG 内容答案

【问题标题】：How to make checkbox show/hide SVG-Content如何使复选框显示/隐藏 SVG 内容
【发布时间】：2019-09-10 12:03:39
【问题描述】：

我在 SVG 中有矩形和线条以及一个复选框。我想以某种方式制作一个选中的复选框以显示内容以及何时选中，否则不会。例如：当检查“区域”的复选框时，将显示“区域矩形”，并为“河流”相同。

这似乎并不难，但我对 JavaScript 完全陌生，找不到让它工作的方法。

脚本将采用 HTML 格式，并且能够在 Web 浏览器上显示。一切都是可见的，但我无法让复选框起作用。

我尝试使用“onClick”构建函数并将颜色更改为“none”。

 <html>
	<head>
		<title>Web Mapping using SVG</title>
		<script>
		</script>
	 <style>
	</style>
	</head>
	
	<body>
		<form>
			<fieldset style="width:600px; height:600px">
				<legend>Layers</legend>


    <input type="checkbox" id="areaCbx" /><strong                                                    id="areaTXT">Area</strong><br>
				<input type="checkbox" id="riverCbx"  /><strong id="riverTXT">River</strong><br>
				<hr />
				
				
    <svg width="100%" height="100%">
				
	<g id="AreaSVG" >
						<rect x="0" y="0" width="100" height="200"   />
						<rect x="120" y="0" width="100" height="200"   />
						<rect x="280" y="0" width="100" height="200"  />
						<rect x="400" y="0" width="100" height="200"   />
						<rect x="0" y="260" width="100" height="200"  />
						<rect x="120" y="260" width="100" height="200"  />
						<rect x="240" y="260" width="100" height="200"  />
						<rect x="360" y="260" width="100" height="200"  />
    </g>
    <g id="RiverSVG">
						
                    <line x1="0" y1="230" x2="500" y2="230"   style="stroke:blue;stroke-width:6"/>
                    <line x1="250" y1="230" x2="250" y2="0" style="stroke:blue;stroke-width:6"/>
                    <line x1="0" y1="500" x2="500" y2="500" style="stroke:blue;stroke-width:6"/>
						
			</g>
      </svg>
			</fieldset>
		</form>
	</body>
</html>

【问题讨论】：

问题不是很清楚，代码也不是很容易运行。你能解释更多关于功能的信息吗？也许可以粘贴一个stackblitz链接
您好，感谢您的回复。我已经发布了应该能够通过网络浏览器读取为 HTML 的完整代码。我想要的是让复选框确定是否显示矩形（AreaSVG）或线条（RiverSVG）。如果 id id="areaCbx" 的复选框被选中，它应该显示是矩形，否则不是。
这里有错别字<<g id="AreaSVG" >

标签： javascript css svg

【解决方案1】：

你可以用 CSS 做到这一点（你也有两个错别字 <<g 和 "y2="0"）

svg > g {
  display: none;
}
#riverCbx:checked ~ svg #RiverSVG {
  display: block;
}
#areaCbx:checked ~ svg #AreaSVG {
  display: block;
}

        <fieldset style="width:600px; height:600px">
            <legend>Layers</legend>


<input type="checkbox" id="areaCbx" /><strong                                                    id="areaTXT">Area</strong><br>
            <input type="checkbox" id="riverCbx"  /><strong id="riverTXT">River</strong><br>
            <hr />


<svg width="100%" height="100%">

<g id="AreaSVG" >
                    <rect x="0" y="0" width="100" height="200"   />
                    <rect x="120" y="0" width="100" height="200"   />
                    <rect x="280" y="0" width="100" height="200"  />
                    <rect x="400" y="0" width="100" height="200"   />
                    <rect x="0" y="260" width="100" height="200"  />
                    <rect x="120" y="260" width="100" height="200"  />
                    <rect x="240" y="260" width="100" height="200"  />
                    <rect x="360" y="260" width="100" height="200"  />
</g>
<g id="RiverSVG">

                <line x1="0" y1="230" x2="500" y2="230"   style="stroke:blue;stroke-width:6"/>
                <line x1="250" y1="230" x2="250" y2="0" style="stroke:blue;stroke-width:6"/>
                <line x1="0" y1="500" x2="500" y2="500" style="stroke:blue;stroke-width:6"/>

        </g>
  </svg>
        </fieldset>

【讨论】：

【解决方案2】：

所以您似乎只想根据选中的复选框显示/隐藏 SVG 的一部分？如果是这样：

<style>
svg #AreaSVG ,
svg #RiverSVG {
display: none;
}
#areaCbx:checked ~ svg #AreaSVG { display: block; }
#riverCbx:checked ~ svg #RiverSVG { display: block; }
<style>

【讨论】：

【解决方案3】：

您可以使用 (:checked) 伪选择器和“非即时相对选择器” (~)

#riverCbx:checked ~ svg {
 display: none; 
}

【讨论】：

【解决方案4】：

如果您不能假设 DOM 结构（CSS 选择器将依赖）永远不会改变，那么 javascript 解决方案可能会更可靠。

areaTXT.addEventListener('click', function(){
  so_SVG.classList.toggle('svg--hidden');
});

.svg--hidden {
  display: none;
}

<form>
  <fieldset style="width:600px; height:600px">
    <legend>Layers</legend>
    <input type="checkbox" id="areaCbx" /><strong id="areaTXT">Area</strong><br>
    <input type="checkbox" id="riverCbx" /><strong id="riverTXT">River</strong><br>
    <hr />
    <svg width="100%" height="100%" id="so_SVG">
      <g id="AreaSVG" >
          <rect x="0" y="0" width="100" height="200"/>
          <rect x="120" y="0" width="100" height="200"/>
          <rect x="280" y="0" width="100" height="200"/>
          <rect x="400" y="0" width="100" height="200"/>
          <rect x="0" y="260" width="100" height="200"/>
          <rect x="120" y="260" width="100" height="200"/>
          <rect x="240" y="260" width="100" height="200"/>
          <rect x="360" y="260" width="100" height="200"/>
      </g>
      <g id="RiverSVG">
        <line x1="0" y1="230" x2="500" y2="230" style="stroke:blue;stroke-width:6"/>
        <line x1="250" y1="230" x2="250" y2="0" style="stroke:blue;stroke-width:6"/>
        <line x1="0" y1="500" x2="500" y2="500" style="stroke:blue;stroke-width:6"/>
      </g>
    </svg>
  </fieldset>
</form>

注意：我在这里使用 ids 的元素，因为它们已经在全局范围内定义为变量。

【讨论】：