為什么觸發此腳本中的操作時 SVG 不像 TEXT 那樣“熱”？
所有文本元素都很好地觸發了正確的主題，但是當這些文本被替換為完全相同的按鈕 id 位置的 SVG 時，代碼不會選擇相應的主題。
然而，它適用于 SVG 的周邊區域，但不適用于 SVG 本身。
我希望能夠同時使用SVG 本身和SVG周圍的一些填充以增加易用性。
<div id="scheme">
<button id="auto">Auto</button>
<button id="default">Default</button>
<button id="light">Light</button>
<button id="dark">Dark</button>
<button id="blue">
<svg width="20" height="20">
<rect width="20" height="20" style="fill: lightgrey" />
<!-- The face of this SVG does NOT actuate a theme change -->
</svg>
</button>
</div>
演示
https://jsfiddle.net/eu097xsd/
localStorage由于沙盒，在 Stack Overflow 上的代碼片段中不起作用，因此必須將代碼片段中的所有代碼保存為完整頁面，然后在真實環境中進行測驗。
另請查看https://github.com/besworks/theme-selector
顯示代碼片段
/* Besworks Hot Theme Without Memory Problems
https://github.com/besworks/theme-selector */
let prefersDark = matchMedia('(prefers-color-scheme: dark)');
prefersDark.addEventListener('change', event => loadTheme());
function setTheme(theme) {
if (theme == 'auto') {
localStorage.removeItem('theme');
loadTheme(null);
} else {
localStorage.setItem('theme', theme);
applyTheme(theme);
}
}
function loadTheme(theme) {
theme = localStorage.getItem('theme');
theme ??= (prefersDark.matches) ? 'dark' : 'default';
applyTheme(theme);
}
function applyTheme(theme) {
document.documentElement.className = theme;
}
window.setTheme = setTheme;
loadTheme();
let selector = document.getElementById('scheme');
selector.addEventListener('click', event => {
if (event.target == selector) { return; }
window.setTheme(event.target.id);
});:root.default { --bgr: #eee; --txt: #000; }
:root.light { --bgr: #ddc; --txt: #446; }
:root.dark { --bgr: #222; --txt: #a75; }
:root.blue { --bgr: #246; --txt: #eec; }
body { background: var(--bgr); color: var(--txt); margin: 1.5rem; }
#scheme button {
border: 1px solid red;
background: none;
color: inherit;
text-decoration: underline;
cursor: pointer;
} <h1> Select a theme to change the color scheme! </h1>
<div id="scheme">
<button id="auto">Auto</button>
<button id="default">Default</button>
<button id="light">Light</button>
<button id="dark">Dark</button>
<button id="blue">
<svg width="20" height="20">
<rect width="20" height="20" style="fill: lightgrey; stroke-width:1px; stroke: red;" />
</svg>
</button>
</div>uj5u.com熱心網友回復：
SVG 可能會阻止button接收和傳播點擊事件。你可以試試：
button svg {
pointer-events: none;
}
這允許單擊“通過”svg 到底層按鈕
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/489932.html
標籤：javascript css svg 点击
上一篇：<svg>大于<use>
下一篇：SVG線性漸變不適用于其他元素