Tracking app with React

Community feedback

• 

  P

  Kent O'Sullivan•1,870

  @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.

  Working with SVG's

  Hope this helps, and keep up the great work!

  0
• 

  Clara Wen•320

  @clarafuwenPosted over 2 years ago

  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•300

  @PoukamePosted over 2 years ago

  @clarafuwen

  Hi Clara, unfortunately it doesn't work :(

  0

  

  Clara Wen•320

  @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 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•300

  @PoukamePosted over 2 years ago

  @clarafuwen Thank you. It worked !!

  0