CODEWITHSUNDEEP
htmlcsssvg
user2232273
user2232273

Reputation: 4964

CSS - Change Fill Color on Hover - SVG PATH

im using the modern ui icons pack in my project using the svg path.

what i try to do is to change the fill color on hover .

but i have no success..

hope someone help me out with this .

Thanks in advance.

Code:

<div id="Main">
   <ul>
      <li>
          <form>
             <button>
                <div class="inner">
                   <svg>
                     <path d="M35.......etc..">
                     </path>
                   </svg>
                </div>
             </button>
          </form>
      </li>
   </ul>
</div

Upvotes: 37

Views: 135395

Answers (5)

Hebe Hilhorst
Hebe Hilhorst

Reputation: 363

For anyone trying to do this in React, I created a component to manage this using filters.

Gist

https://gist.github.com/HebeHH/a27cad60df5d70fb725b63e749a791b2

Usage

<HoverSVG
  alt="Twitter handle"
  src="/layout/twitter.svg"
  width={24}
  height={24}
  color="#37b7c3" // Normal color
  hoverColor="#ff204e" // Hover color
/>

Notes

  • Assumes svg file is white and will recolor from white
  • Alt text not working

Upvotes: 0

Oleg Kreminskyy
Oleg Kreminskyy

Reputation: 11

You can use an online service to change the SVG file color. Just type in the color you want

For #00a4d6 color:
filter: invert(41%) sepia(97%) saturate(1467%) hue-rotate(163deg) brightness(97%) contrast(101%);

Upvotes: 0

Rajnikant Kakadiya
Rajnikant Kakadiya

Reputation: 2265

You can overwrite svg fill color via css like below and also target different elements like <path> polygon circle etc.

#Main svg:hover {
    fill: #fce57e;
}

#Main svg:hover path {
    fill: #fce57e;
}

#Main svg:hover plygon {
    fill: #fce57e;
}

#Main svg:hover circle {
    fill: #fce57e;
}

Upvotes: 59

GorvGoyl
GorvGoyl

Reputation: 49150

In some cases stroke is used instead of fill for svg, so use this

svg:hover path { 
    stroke: #fce57e;
}

or if there's no path involved:

svg:hover { 
    stroke: #fce57e;
}

Upvotes: 4

Anderson Koh
Anderson Koh

Reputation: 503

Sorry for answering a very very old post.

I think the best way is to see what tag was wrapped inside your <svg>.

So for example:

<svg>
    <path>...</path>
</svg>

As you can see the <path> tag is wrapped by the <svg>. Then you can just add <path> with this way in css:

svg:hover path { 
    fill: #fce57e;
}

Here is the working snippet:

svg:hover path {
  fill: black;
  transition: all ease 0.3s;
}

svg path {
  transition: all ease 0.3s;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33.19 50.36" width="15%" class="go-location-all" id="go-location-icon"><defs><style>.cls-1{fill:#DF1E34;}</style></defs><title>find-location</title><g id="Layer_2" data-name="Layer 2"><g id="artwork"><path class="cls-1" d="M20.75,22.56a1.09,1.09,0,1,0-1-1.93,6.71,6.71,0,1,1,3.56-5.92,1.1,1.1,0,0,0,2.19,0,8.88,8.88,0,1,0-4.73,7.85Z"/><path class="cls-1" d="M15.88,44.28a1.07,1.07,0,0,0,.71.27,1.09,1.09,0,0,0,.67-.23,37.31,37.31,0,0,0,7-7.8,38.45,38.45,0,0,0,7-21.82,14.71,14.71,0,1,0-29.41,0c0,9,3.8,16.58,7,21.33A44.52,44.52,0,0,0,15.88,44.28Zm.71-42.09A12.53,12.53,0,0,1,29.11,14.71a36.16,36.16,0,0,1-6.57,20.5A38.39,38.39,0,0,1,16.63,42a46.29,46.29,0,0,1-6-7.22c-3-4.49-6.58-11.62-6.58-20.06A12.52,12.52,0,0,1,16.59,2.19Z"/><path class="cls-1" d="M24.51,40.69a1.1,1.1,0,0,0-.32,2.17C29.59,43.67,31,45,31,45.25s-.79,1-3.94,1.83a45.38,45.38,0,0,1-10.47,1.09A45.29,45.29,0,0,1,6.13,47.08C3,46.3,2.22,45.44,2.19,45.25S3.59,43.67,9,42.86a1.09,1.09,0,0,0-.32-2.16C4.7,41.29,0,42.57,0,45.25c0,1.66,1.8,3,5.36,3.9a46.84,46.84,0,0,0,11.23,1.21,47,47,0,0,0,11.24-1.21c3.55-.92,5.36-2.24,5.36-3.9C33.19,42.56,28.47,41.29,24.51,40.69Z"/></g></g></svg>

Upvotes: 18

Related Questions