Ребята, спасайте! 🙏 Пытаюсь вставить SVG
Ребята, спасайте! 🙏
Пытаюсь вставить SVG и покрасить его через CSS, но цвет не меняется 😡
1 2 3 |
<div class="icon"> <img src="icon.svg" alt="Иконка"> </div> |
1 2 3 4 5 |
.icon img { width: 40px; height: 40px; fill: red; } |
SVG точно простой, без скриптов. Почему fill: red; не работает? Я думал, можно так цвет менять...
1 ответ
@forest
Проблема заключается в том, что свойство CSS fill не влияет на элементы внутри SVG, когда SVG используется в качестве src для <img>. Это связано с тем, что содержимое SVG при таком использовании становится независимым от внешнего CSS.
Чтобы изменить цвет SVG с помощью CSS, нужно использовать один из следующих подходов:
Подход 1: Использование SVG кода внутри HTML
Вставьте код SVG непосредственно в HTML вместо использования <img>. Это позволит вам использовать CSS-свойства для изменения цвета.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
<path d="..." fill="currentColor"></path>
</svg>
</div>
<style>
.icon svg {
width: 40px;
height: 40px;
fill: red; /* Замена тока цвета */
}
</style>
|
Убедитесь, что ваш путь (или другой элемент внутри SVG) использует fill="currentColor", чтобы изменение CSS-свойства fill влияло на него.
Подход 2: Использование SVG как background-image
Если вы хотите оставить SVG файл отдельным, вы можете использовать его как фон:
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="icon"></div>
<style>
.icon {
width: 40px;
height: 40px;
background-image: url('icon.svg');
background-size: contain;
background-repeat: no-repeat;
filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(135deg) brightness(0%) contrast(102%);
}
</style>
|
Этот метод работает, но цвет меняется с помощью CSS filter, что может подходить не для всех случаев и требует подбора параметров фильтра для каждого цвета.
Рассмотрите оба варианта и выберите тот, который больше подходит для вашего случая.