How do I change SVG fill and stroke on hover?

Click Apply fill+stroke hover. A rule sets resting and :hover fill and stroke. Hover the preview to verify.

How is this different from Change SVG Fill Color on Hover?

Fill-on-hover only restyles fill. This page updates fill and stroke in the same :hover rule.

Presentation attributes can override CSS. This pass removes them so the class rule wins.

Convert colors to currentColor for inheritance, then add hover if you need a second explicit color.

FAQ

Quick answers

How do I change SVG fill and stroke on hover?: Click Apply fill+stroke hover. A <style> rule sets resting and :hover fill and stroke. Hover the preview to verify.
How is this different from Change SVG Fill Color on Hover?: Fill-on-hover only restyles fill. This page updates fill and stroke in the same :hover rule.
Why doesn’t hover work if I leave hardcoded stroke attributes?: Presentation attributes can override CSS. This pass removes them so the class rule wins.
Can I use currentColor and hover together?: Convert colors to currentColor for inheritance, then add hover if you need a second explicit color.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B