Change Color of SVG on Hover

SVG has various application methods, and according to different application methods, the color strategies of changing SVG in different states (hover: hover, activation: active, focus: focus, class name change, etc.) are also different. Let's take a look at it separately:

Inline SVG

Inline SVG is my personal favorite way to use SVG, partly because it is easy to access and styling.

If you're used to using icon fonts, you might like a little bit of their easy color change. Icon fonts are somewhat limited to monochrome, while SVG is not, but still, it is very easy to change the monochrome of the icon font. Using inline SVG allows you to set the fill property, which will cascading to all elements within the SVG, or you can fill each element separately if needed.

SVG symbols/use

There is a so-called SVG Sprite diagram, which is a set of conversions to<symbol></symbol> SVG of the element so that any given icon can pass<use></use> Elements are easily referenced.

You can still easily set the fill color via external CSS, but there are some notes:

• Internal SVG elements (e.g.<path></path> ) itself can be without padding. This allows the padding to be cascading from the parent SVG set to<use></use> The Shadow DOM created. Once you're in<symbol></symbol> Added similar<path ... fill="blue"></path> You lose control of external CSS.
• Again, you cannot control the filling of individual elements within the SVG as you would with inline SVG. This means you are basically in a monochrome area. This covers most use cases, but is still a limitation.

SVG background image

SVG can be set as a background image like PNG, JPG, or any other graphic format. At this point, you basically give up the ability to change the fill. One possibility (I don't think it's particularly good) is to prepare two versions for each graph standard, use different colors, and then switch between them:

I won't blame you if you don't want to switch resources, so another possibility is to use complex filters.

Trying to adjust the right filter to get the right color is a tricky thing. Luckily, Barrett Sonntag has created a tool to help you calculate filters! Converting black to red ends up with a weird combination, such as: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) ;.

SVG also has an object property, which was very concise in the past because it had a built-in fallback mechanism – although browser support is very good these days, I honestly never used it. But if you are using it, you may need to use this filter technique to switch the color when hovering.

Use mask instead of background image

In this way, SVG is still responsible for drawing the shape, but the color comes from the background color behind it (or picture! or gradient!) rather than the SVG itself.

SVG background image as data URL

This is not much different from the above method, but it does offer an interesting possibility: use variables for internal padding. Here is an example of using Sass to keep the URL as a variable:

You can also use native CSS custom properties to achieve this!

The above is the detailed content of Change Color of SVG on Hover. For more information, please follow other related articles on the PHP Chinese website!