小编Luí*_*ues的帖子

如何创建 SVG 复选框？

我想使用 svg 制作一个简单的复选框。

它不必是动画的，也不必是任何东西。我只是希望它在选中时更改填充颜色。就如此容易。

这是我的代码：

<!DOCTYPE html>
<html>
    <header>

        <link href="{{ asset('css/app.css') }}" rel="stylesheet">

        <style>
        svg input:checked  {
            fill:yellow;
        }

        .my-image:hover {
            background-color:green;
            fill:red;
        }

        .my-image input:checked {
            fill:red;
        }

        </style>
    </header>

    <body>

        <label>
            <input type="checkbox" name="" value="" checked/>
            <svg class = "my-image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="17"
            height="16" viewBox="0 0 17 16">
            <path d="M8.500,0.000 L11.301,5.028 L16.999,6.112 L13.033,10.302 L13.753,16.000 L8.500,13.561 L3.247,16.000 L3.967,10.302 L0.001,6.112 L5.699,5.028 L8.500,0.000"
            class="cls-1" />
            </svg>

        </label>

        <script src="{{ asset('js/app.js') }}" type="application/javascript"></script>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

这让我简直要疯了。svg 甚至有一个红色背景，我不知道它来自哪里。