我想使用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不太熟悉,肯定是我漏掉了什么。
谢谢。