Свойства пути доступа svg через css

Я сохранил изображение svg с помощью illustrator, и содержимое выглядит следующим образом:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1"   x="0px" y="0px"
     viewBox="10.3 126 503.7 272" style="enable-background:new 10.3 126 503.7 272;" xml_space="preserve">
<style type="text/css">
    .st0{fill:#B7B7B7;}
    .st1{fill:#33BFC1;}
    .st2{fill:#B23939;}
</style>
<path fill="#B7B7B7" class="st0" d="M20.4,126h113c4.3,0,8"/>
<path class="st1" d="M504,126H390c-4.3,0-8,2.7-9.4,6"/>
<path class="st2" d="M420.9,384.6l-92.2-252"/>
</svg>

В моем html у меня есть :

<a><img class="logo" src="logo.svg"></a>

Поскольку в svg есть 3 пути, я хочу иметь возможность стилизовать каждый с помощью css. Я знаю, что могу редактировать непосредственно svg файл, но идея состоит в том, чтобы изменить его с помощью css.

Я пробовал что-то вроде

.st0 {
fill:#fff
}
.st0 path {
fill:#fff
}

но ничего из этого не работает

1 ответ

  1. Это должно сработать, только если оно размещено после предыдущего .st0.

    .st0 {
    fill:#fff
    }
    

    Это правильный способ объявить второй пример.

    path.st0  {
    fill:#fff
    }
    

    Но оба они должны быть после блока кода svg.

    Я думаю, что происходит то, что у вас есть SVG в вашем теле, и вы объявляете css в голове. Таким образом, ваша fill:#fff перезаписывается CSS внутри элемента SVG.