单击复选框更改 svg 形状颜色

Question

我想在单击复选框时更改 svg 形状的填充颜色。我有这个工作，但是如果我将复选框输入包装在一个 div 标签中，它就不再工作了。

#circles {
  fill: #00ffff;
}

#circ-toggle .toggler:checked~#circles .circ1 {
  fill: #000000;
  fill-opacity: 0.3;
}

<div id="circ-toggle" class="toggle">
  <input type="checkbox" id="toggle-1" class="toggler">
  <label for="toggle-1" class="btn-toggle">Change Color</label>
</div>

<div id="circles">
  <svg viewBox="0 0 40 30">
        <g>
            <circle class="circ1" cx="1" cy="1" r="1" />
            <circle class="circ2" cx="3" cy="1" r="1" />
        </g>
    </svg>
</div>

Answer 1

如果您的设计可以容忍这种变化，那么您当前的 css 将可以工作：

请注意，我已将<div id="circ-toggle" class="toggle"> 的结束标记移动到您的css 的末尾，以便它封装<div id="circles">。这样做会在checkbox 和<div id="circles"> 之间创建兄弟关系。现在general sibling combinator (~) 可以到达所需的元素。

您当然可以使用 javascript 轻松完成此任务，但看起来您想要一个仅 css 的答案。

const checkbox = document.getElementById('toggle-1')

checkbox.addEventListener('change', (event) => {
  if (event.currentTarget.checked) {
    alert('checked');
  } else {
    alert('not checked');
  }
})

#circles {
  fill: #00ffff;
}

.gray {
  fill: #000000;
  fill-opacity: 0.3;
}

<div id="circ-toggle" class="toggle">
  <input type="checkbox" id="toggle-1" class="toggler">
  <label for="toggle-1" class="btn-toggle">Change Color</label>
</div>
<div id="circles">
  <svg viewBox="0 0 40 30">
        <g>
            <circle class="circ1" cx="1" cy="1" r="1" />
            <circle class="circ2" cx="3" cy="1" r="1" />
        </g>
    </svg>
</div>

编辑：这是一个javascript方法：

const checkbox = document.getElementById('toggle-1');
const circle = document.querySelector("#circles > svg > g > circle.circ1");

checkbox.addEventListener('change', (event) => {
  if (event.currentTarget.checked) {
    circle.classList.add("gray");
  } else {
    circle.classList.remove("gray");
  }
})

#circles {
  fill: #00ffff;
}

.gray {
  fill: #000000;
  fill-opacity: 0.3;
}

<div id="circ-toggle" class="toggle">
  <input type="checkbox" id="toggle-1" class="toggler">
  <label for="toggle-1" class="btn-toggle">Change Color</label>
</div>
<div id="circles">
  <svg viewBox="0 0 40 30">
        <g>
            <circle class="circ1" cx="1" cy="1" r="1" />
            <circle class="circ2" cx="3" cy="1" r="1" />
        </g>
    </svg>
</div>