我该如何创建一个SVG复选框？

Question

我该如何创建一个SVG复选框？

4

我想使用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>

这真的让我疯了。即使SVG有一个红色的背景，我也不知道它来自哪里。

我看了很多教程，阅读了很多文献，尝试了很多例子，但都没有成功。

我只需要一个使用SVG的简单复选框。你能帮我吗？

此外，我对CSS和HTML不太熟悉，肯定是我漏掉了什么。

谢谢。

- Luís Henriques

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- twain · Accepted Answer

.my-image input:checked + svg path这样写才有效，因为input不是.my-image的子元素，即使是也不能用fill: red来改变图像颜色。

你可以尝试一下下面的写法：

  input[type="checkbox"]:checked + .my-image {
        fill:red;
  }

我创建了一个fiddle，您可以在这里查看：https://jsfiddle.net/uvt5zqr9/

在这个fiddle中，背景不是红色的，我猜可能是你的app.css文件中有些内容导致了红色背景。