如何將 svg 文件用作復選框？

Question

我在 Adob​​e Illustrator (id="gray-x-button") 中制作了一個 svg 圖像，我想將 svg 代碼用作自定義形狀的復選框。 一旦用戶單擊復選框，我希望復選框更改為我在 Illustrator 中制作的不同 svg 圖像（id="red-x-button"）。 我將如何使用 HTML、CSS 和 Javascript 做到這一點？ 我對 Web 開發很陌生，所以我什至不知道從哪里開始。 我現在只有從 Illustrator 導出的 svg 代碼，我將在下面發布。

<svg id="gray-x-button" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="152.53" height="152.53" viewBox="0 0 152.53 152.53">s
    <defs>
        <style>.cls-1-g{fill:url(#linear-gradient);}.cls-2-g{opacity:0.25;}.cls-3-g{fill:#fff;}</style>
        <linearGradient id="linear-gradient" x1="187.42" y1="187.55" x2="317.1" y2="317.23" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#d1d1d1"/>
            <stop offset="0.62" stop-color="#acadaf"/>
            <stop offset="1" stop-color="#939598"/>
        </linearGradient>
    </defs>
    <path id="Cross-g" class="cls-1-g" d="M280.3,252.39,326.69,206a6.26,6.26,0,0,0,0-8.86L307.51,178a6.28,6.28,0,0,0-8.86,0l-46.39,46.39L205.87,178a6.28,6.28,0,0,0-8.86,0l-19.18,19.18a6.28,6.28,0,0,0,0,8.86l46.39,46.39-46.39,46.39a6.28,6.28,0,0,0,0,8.86L197,326.82a6.26,6.26,0,0,0,8.86,0l46.39-46.39,46.39,46.39a6.26,6.26,0,0,0,8.86,0l19.18-19.18a6.26,6.26,0,0,0,0-8.86Z" transform="translate(-176 -176.13)"/>
    <g id="Depth-g" class="cls-2-g">
        <path class="cls-3-g" d="M305.08,180.13a4.2,4.2,0,0,1,3,1.25l-2-2a4.25,4.25,0,0,0-6,0l-47.81,47.8-47.81-47.8a4.25,4.25,0,0,0-6,0l-19.19,19.18a4.26,4.26,0,0,0,0,6l2,2a4.26,4.26,0,0,1,0-6l19.19-19.18a4.25,4.25,0,0,1,6,0l47.81,47.8,47.81-47.8A4.2,4.2,0,0,1,305.08,180.13Z" transform="translate(-176 -176.13)"/>
        <polygon class="cls-3-g" points="149.28 124.07 103.47 78.27 149.28 124.07 149.28 124.07"/>
        <path class="cls-3-g" d="M227.8,256.13l-2-2-46.64,46.64a4.16,4.16,0,0,0,0,5.88l18.72,18.72h0l-16.77-16.77a4.16,4.16,0,0,1,0-5.88Z" transform="translate(-176 -176.13)"/>
    </g>
</svg>

<svg id="red-x-button" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="152.53" height="152.53" viewBox="0 0 152.53 152.53">
    <defs>
        <style>.cls-1-r{fill:#231f20;}.cls-2-r{fill:url(#radial-gradient);}</style>
        <radialGradient id="radial-gradient" cx="252.26" cy="252.39" r="74.26" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#f7941d"/>
            <stop offset="0.2" stop-color="#f4701f"/>
            <stop offset="0.43" stop-color="#f14c21"/>
            <stop offset="0.65" stop-color="#ef3123"/>
            <stop offset="0.85" stop-color="#ed2224"/>
            <stop offset="1" stop-color="#ed1c24"/>
        </radialGradient>
    </defs>
    <path id="Cross-r" class="cls-1-r" d="M280.3,252.39,326.69,206a6.26,6.26,0,0,0,0-8.86L307.51,178a6.28,6.28,0,0,0-8.86,0l-46.39,46.39L205.87,178a6.28,6.28,0,0,0-8.86,0l-19.18,19.18a6.28,6.28,0,0,0,0,8.86l46.39,46.39-46.39,46.39a6.28,6.28,0,0,0,0,8.86L197,326.82a6.26,6.26,0,0,0,8.86,0l46.39-46.39,46.39,46.39a6.26,6.26,0,0,0,8.86,0l19.18-19.18a6.26,6.26,0,0,0,0-8.86Z" transform="translate(-176 -176.13)"/>
    <path class="cls-2-r" d="M303.08,326.66a4.24,4.24,0,0,1-3-1.25L252.26,277.6l-47.81,47.81a4.25,4.25,0,0,1-6,0l-19.19-19.19a4.26,4.26,0,0,1,0-6l47.81-47.81-47.81-47.81a4.26,4.26,0,0,1,0-6l19.19-19.19a4.26,4.26,0,0,1,6,0l47.81,47.8,47.81-47.81a4.26,4.26,0,0,1,6,0l19.19,19.18a4.26,4.26,0,0,1,0,6l-47.81,47.81,47.81,47.81a4.25,4.25,0,0,1,0,6l-19.19,19.19A4.24,4.24,0,0,1,303.08,326.66Z" transform="translate(-176 -176.13)"/>
</svg>

我更喜歡使用內聯 svg 代碼，這樣我以后可以用 CSS 修改它。 謝謝！

Answer 1

您可以在此相關帖子中找到正確的答案和更多信息style-a-checkbox-using-css