Zmiana koloru svg

Question

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;
}

 

Answer 1

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);
}

 

Comments

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);
}