Не применяется стиль текста к SVG файлу

Question

Вот у меня есть SVG файл. Я делаю сайт через фреймворк Django. Когда я использую этот SVG файл в шаблоне (он у меня в статических файлах), то это всё выглядит следующим образом:

Тут я уже поменял цвет(ещё в иллюстраторе), но почему не применяется стиль текста?? В джанго применяю так:

Answer 1

Можно проще менять цвет svg картинок на нужный. Открываете код картинки и прописываете для каждого <path в конце fill="цвет"/>. Пример:

<svg>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.939378 15.0605C0.658171 14.7792 0.500198 14.3977 0.500198 14C0.500198 13.6022 0.658171 13.2207 0.939378 12.9395L5.87888 7.99995L0.939377 3.06046C0.796112 2.92208 0.681839 2.75657 0.603225 2.57356C0.524612 2.39056 0.483232 2.19373 0.481501 1.99456C0.479771 1.79539 0.517723 1.59787 0.593144 1.41352C0.668566 1.22918 0.779945 1.0617 0.920784 0.920863C1.06162 0.780025 1.2291 0.668645 1.41345 0.593224C1.59779 0.517802 1.79531 0.479848 1.99448 0.481579C2.19365 0.48331 2.39048 0.52469 2.57348 0.603303C2.75649 0.681916 2.92201 0.79619 3.06038 0.939456L9.06038 6.93945C9.34158 7.22075 9.49956 7.60221 9.49956 7.99995C9.49956 8.3977 9.34158 8.77916 9.06038 9.06045L3.06038 15.0605C2.77909 15.3417 2.39762 15.4996 1.99988 15.4996C1.60213 15.4996 1.22067 15.3417 0.939378 15.0605Z" fill="white"/>
</svg>

Answer 2

Класс нужно присвоить прямо внутри svg изображения.

Зайдите в LOGO.SVG и в добавьте class="svg-logo"

Потом в css работайте с ним через .svg-logo

Answer 3

SVG изображение, добавленное с помощью тега <img src="/logo.svg">, как самостоятельный (standalone) файл, не может быть стилизовано из внешней таблицы стилей.
Так как это изолированный объект, по сути, это та же картинка.
У которой можно только подкрасить подложку (background-color:yellowgreen;).

#img {
  transition:all 1s;
}
#img:hover {
color:red;
fill:red;
background-color:yellowgreen;
}

<a href="#">
<img id="img" src="https://upload.wikimedia.org/wikipedia/commons/6/64/Rostec_logo.svg">
</a>

CSS filter

С помощью css или svg фильтров из внешней таблицы стилей, получится перекрасить иконку.

#img {
 display:inline-block; 
 transition:all 2s;
}
#img:hover {
filter:invert(100%); 
background-color:white;
}

<a href="#">
<img id="img" src="https://upload.wikimedia.org/wikipedia/commons/6/64/Rostec_logo.svg">
</a>

БЛОГ НА HUSL

Не применяется стиль текста к SVG файлу

Ответы (3 шт):

CSS filter