I’m using an svg file produced by graphviz. My goal is to add checkboxes at the top in a foreignObject to toggle the visibility of certain elements. This is a minimal example where unchecking the checkbox should make the cluster element disappear.

<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
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>
  </foreignObject>

  <style>
    .toggleCbx{ width: 20px; height: 20px; }
    .toggleLabel{ font-size: 20px; font-family: "Fira Sans";}
    .cluster{ display: block; }
    #clusterCbx:not(:checked) ~ .cluster{ display: none;}
    #clusterCbx:not(:checked) ~ .toggleLabel{ display: none;}
  </style>

</svg>

Unfortunately, it has no influence on the rendered cluster element but, interestingly, the last part of the conditional css works: the “Clusters” label of the checkbox disappears when the box is checked. So I’m probably incorrectly referencing the cluster class in the style part.