Design comparison
Solution retrospective
Hello,
Can someone tell me how to change the color of a SVG (for example, for :hover state).
I've tried fill
but it doesn't work, and it's something we need to often do on FEM.
Thanks.
Community feedback
- @12KentosPosted over 2 years ago
Hey @Poukame,
Nice job on the project!
When I work with SVG's I tend to use the
Mask
style. Here's a great video on working with SVG's.Hope this helps, and keep up the great work!
0 - @clarafuwenPosted over 2 years ago
Hello Poukame,
Nice implementation of the project!!
For the svg fill to work, you probably need to add
path
aftersvg
. Try this to see if it works on the hover state. It worked for me ;) Let me know and cheers!.yourClass svg:hover path { fill: colorOfYourChoice; }
0@clarafuwenPosted over 2 years ago@Poukame Sorry, for some reason, I wasn't aware you implemented the project with React. So I cloned your code and what worked for me on my computer is to replace your
img
withsvg
directly in yourCardData
and addclassName='dots'
to the svg. In your CSS file, addpath
after class selectors. I'm assuming your were talking about the elipsis svg on hover. These are my exact code snippets:<div className="inner-wrapper"> <svg className="dots" width="21" height="5" xmlns="http://www.w3.org/2000/svg" > <path d="M2.5 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm8 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm8 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Z" fill="#BBC0FF" fill-rule="evenodd" ></path> </svg> <h2 className="card-title">{props.title}</h2>
In your CSS
.dots:hover path, .dots:focus path { fill: #fff; }
It seems that using SVGs as regular image in React has some downsides. One of them is not customizable. This might be why
fill
does not work the way it was supposed to.I hope the solution works this time and let me know :)
Marked as helpful1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord