使用foreignObject内Checkbox切换SVG中cluster元素可见性问题

• CSS通用兄弟选择器~仅能选择同一父级下的后续同级元素，但你的复选框#clusterCbx位于<foreignObject>内部，属于独立的XHTML文档上下文，和SVG中的.cluster元素不在同一DOM层级，无法通过CSS跨上下文选择。
• 退一步说，即使层级允许，.cluster所在的<g>元素也位于<foreignObject>之前，兄弟选择器只能选中当前元素之后的同级节点，无法反向选择前面的元素。

直接通过监听复选框的状态变化，动态修改.cluster元素的显示属性，这是跨上下文控制SVG元素的可靠方式：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xhtml="http://www.w3.org/1999/xhtml" width="1000pt" height="1000pt" viewBox="0.00 0.00 1000.00 1000.00">

  <g id="graph0" class="graph">
    <title>test_config</title>
    <polygon fill="white" stroke="none" points="0,1000 0,0 1000,0 1000,1000 0,1000"/>

    <g id="clust1" class="cluster">
      <title>cluster_icon_1</title>
      <g id="a_clust1"><a xlink:title="icon&#10;2025-03-01T00:00:00 -- 2025-05-01T00:00:00">
        <polygon fill="#f6f5f4" stroke="none" points="100,900 100,100 900,100 900,900 100,900"/>
        <text text-anchor="middle" x="500" y="150" font-family="Fira Sans" font-size="16.00">cluster title</text>
        <text text-anchor="middle" x="500" y="200" font-family="Fira Sans" font-size="16.00">2025-03-01T00:00:00 -- 2025-05-01T00:00:00</text>
      </a>
      </g>
    </g>

  </g>

  <foreignObject x="0" y="0" width="100%" height="100%">
    <xhtml:input class="toggleCbx" type="checkbox" id="clusterCbx" name="clusters" value="clusters" checked="true"></xhtml:input>
    <xhtml:label class="toggleLabel" for="clusterCbx">Clusters</xhtml:label>
    <xhtml:script>
      // 监听复选框状态变化
      document.getElementById('clusterCbx').addEventListener('change', function(e) {
        // 找到所有cluster类的元素，切换display属性
        const clusters = document.querySelectorAll('.cluster');
        clusters.forEach(cluster => {
          cluster.style.display = e.target.checked ? 'block' : 'none';
        });
        // 同时控制标签的显示（可选，保留原需求）
        document.querySelector('.toggleLabel').style.display = e.target.checked ? 'inline' : 'none';
      });
    </xhtml:script>
  </foreignObject>

  <style>
    .toggleCbx{ width: 20px; height: 20px; }
    .toggleLabel{ font-size: 20px; font-family: "Fira Sans";}
    .cluster{ display: block; }
  </style>

</svg>

• 在<foreignObject>内添加了XHTML脚本，监听复选框的change事件
• 通过document.querySelectorAll('.cluster')获取所有集群元素，动态修改其display属性
• 移除了原CSS中无效的兄弟选择器规则，改用JS统一控制

内容的提问来源于stack exchange，提问作者Pheidippides