我想要一個切換按鈕來改變 svg 的顏色，在這種情況下是一個圓圈。我可以創建一個復選框，僅在 HTML 和 CSS 中更改文本顏色，但它不適用于 svg。
這是適用于文本的代碼。
<label for="element-toggle">click me to toggle color</label>
<input id="element-toggle" type="checkbox" />
<div id="toggled-element">My color will be toggled</div>
label[for=element-toggle] {
cursor: pointer;
color: blue;
}
#toggled-element {
color: green;
}
#element-toggle:checked ~ #toggled-element {
color: red;
}
這是我嘗試使用相同的邏輯來更改 svg 圓圈而不是文本的顏色（這不起作用）
<label for="element-toggle">click me to toggle color</label>
<input id="element-toggle" type="checkbox" />
<svg viewBox="0 0 40 30">
<circle id="toggled-element" cx="1" cy="1.2" r="1" />
</svg>
label[for=element-toggle] {
cursor: pointer;
color: blue;
}
#toggled-element {
fill: green;
}
#element-toggle:checked ~ #toggled-element {
fill: red;
}
uj5u.com熱心網友回復：
目標是錯誤的元素...
我切換id="toggled-element"到了svg而不是circle演示。
這#element-toggle:checked~#toggled-element實際上是svg通過一般的兄弟組合器來選擇的。
label[for=element-toggle] {
cursor: pointer;
color: blue;
}
#toggled-element {
fill: green;
}
#element-toggle:checked~#toggled-element {
fill: red;
}<label for="element-toggle">click me to toggle color</label>
<input id="element-toggle" type="checkbox" />
<svg viewBox="0 0 40 30" id="toggled-element">
<circle cx="1" cy="1.2" r="1" />
</svg>uj5u.com熱心網友回復：
1）您可以直接選擇svg并用green顏色填充它：
svg {
fill: green;
}
2）您必須使用fill將顏色填充svg為：
#element-toggle:checked ~ svg {
fill: red;
}
label[for=element-toggle] {
cursor: pointer;
color: blue;
}
svg {
fill: green;
}
#element-toggle:checked ~ svg {
fill: red;
}<label for="element-toggle">click me to toggle color</label>
<input id="element-toggle" type="checkbox" />
<svg viewBox="0 0 40 30">
<circle id="toggled-element" cx="1" cy="1.2" r="1" />
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/361059.html