P
Kent O'Sullivan• 1,870
@12Kentos
Posted
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
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
Clara Wen• 320
@clarafuwen
Posted
Hello Poukame,
Nice implementation of the project!!
For the svg fill to work, you probably need to add path after svg.
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
Poukame• 170
@Poukame
Posted
@clarafuwen
Hi Clara, unfortunately it doesn't work :(
0
Clara Wen• 320
@clarafuwen
Posted
@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 with svg directly in your CardData and add className='dots' to the svg. In your CSS file, add path 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 helpful
1
Poukame• 170
@Poukame
Posted
@clarafuwen Thank you. It worked !!
0
Please log in to post a comment
Log in with GitHub
Join 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