Как я могу создать флажок SVG? - PullRequest
Новая
       0

Как я могу создать флажок SVG?

0 голосов
/ 19 октября 2018

Я хочу сделать простой флажок, используя 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 даже есть красный фон, который я не знаю, откуда он взялся.

enter image description here

Я смотрел много уроков, много читал иперепробовал много примеров.Ни один из них не работал.

Мне просто нужен простой флажок с использованием svgs.Не могли бы вы помочь мне?

Кроме того, я новичок в CSS и HTML.Я уверен, что что-то упустил.

Спасибо.

1 Ответ

0 голосов
/ 19 октября 2018

.my-image input:checked не будет работать таким образом, потому что input не является дочерним элементом .my-image и даже если fill: red не будет использоваться для вашего изображения.

Вы можете сделать что-то вроде этого, чтобы добиться того, что вы пытаетесь: 

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

Я создал скрипку, где вы можете проверить это: https://jsfiddle.net/uvt5zqr9/

В этой скрипке фон неt red, я думаю, может быть, у вас есть что-то в вашем app.css, что вызывает красный фон.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...