• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Zmiana koloru svg

+1 głos
38 wizyt
pytanie zadane 16 listopada 2021 w HTML i CSS przez TheDarkSide Użytkownik (550 p.)

Kolor svg nie chce się zmienić na biały

<div class="row">
          <div class="col-sm">
            <div class="icon-box" data-aos="fade-up">
              <h4 class="title"><a href="">Rotating Machinery</a></h4>
              <img src = "assets/img/kolo2.svg" class="svg" width="300px" height="300px">


CSS:
.svg:hover
{
	color:#FFFFFF;
}

 

1 odpowiedź

+2 głosów
odpowiedź 16 listopada 2021 przez qax Mądrala (7,300 p.)
wybrane 16 listopada 2021 przez TheDarkSide
 
Najlepsza

Nie możesz zmienić koloru obrazka SVG na biały za pomocą właściwości color: #FFFFFF, gdyż ona odnosi się do koloru tekstu. Aby zmienić kolor obrazu na biały po najechaniu na niego kursorem myszy, zastosuj właściwość filter.

Przykład w akcji:

<img src="http://i.stack.imgur.com/jO8jP.gif" class="svg" />
body {
   background-color: black;
}
.svg:hover {
   filter: brightness(0) invert(1);
}

 

komentarz 16 listopada 2021 przez VBService VIP (144,910 p.)

Za pomocą zmiennych css i właściwości sepia() saturate() hue-rotate() dla filter-a, uzyskasz inne kolory

 

przykład

<img src = "https://www.svgstudio.com/files/1/0269/1435/t/1/assets/Freesample.png?21088" class="svg white" />
<img src = "https://www.svgstudio.com/files/1/0269/1435/t/1/assets/Freesample.png?21088" class="svg black" />
<img src = "https://www.svgstudio.com/files/1/0269/1435/t/1/assets/Freesample.png?21088" class="svg gray" />

<img src = "https://www.svgstudio.com/files/1/0269/1435/t/1/assets/Freesample.png?21088" class="svg pink" />
<img src = "https://www.svgstudio.com/files/1/0269/1435/t/1/assets/Freesample.png?21088" class="svg blue" />
<img src = "https://www.svgstudio.com/files/1/0269/1435/t/1/assets/Freesample.png?21088" class="svg purple" />
<img src = "https://www.svgstudio.com/files/1/0269/1435/t/1/assets/Freesample.png?21088" class="svg green" />
<img src = "https://www.svgstudio.com/files/1/0269/1435/t/1/assets/Freesample.png?21088" class="svg brown" />
body {
   background-color: yellow;
}
img.svg {
  width: 50px;
  height: 60px;
  margin: 1em;
}
.svg:hover {
   filter:  var(--svg-color); 
}
.white {
  --svg-color: brightness(0) invert(1);
}
.black {
  --svg-color: brightness(0) invert(0);
}
.gray {
  --svg-color: brightness(1) invert(0.5);
}

.pink {
  --svg-color: invert(0.5) brightness(0.5) sepia(1) hue-rotate(-75deg) saturate(6);
}
.blue {
  --svg-color: invert(0.5) brightness(0.5) sepia(1) hue-rotate(180deg) saturate(6);
}
.purple {
  --svg-color: invert(0.5) brightness(0.5) sepia(1) hue-rotate(230deg) saturate(6);
}
.green {
  --svg-color: invert(0.5) brightness(0.5) sepia(1) hue-rotate(50deg) saturate(5);
}
.brown {
  --svg-color: invert(0.5) brightness(0.5) sepia(1) hue-rotate(350deg) saturate(5);
}

 

Podobne pytania

0 głosów
2 odpowiedzi 136 wizyt
pytanie zadane 22 marca 2020 w HTML i CSS przez kuba1245677 Obywatel (1,080 p.)
0 głosów
1 odpowiedź 71 wizyt
pytanie zadane 27 marca 2019 w HTML i CSS przez niezalogowany
0 głosów
3 odpowiedzi 99 wizyt

86,486 zapytań

135,242 odpowiedzi

300,488 komentarzy

57,234 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...