Huddle Landing Page

Community feedback

• 

  Sahand Masoleh•1,210

  @sahand-masolehPosted almost 2 years ago

  Hello!

  You most likely need to edit your SVG, as any styling defined in there has the highest specificity.

  If you want to be able to control the color through your CSS or JS file, a common tactic is to set the fill or stroke in your SVG to currentColor so that it will follow the container.

  Also, if you're using an SVG inliner with Webpack for example, you can directly alter fill and stroke provided that they're not defined inside the SVG file.

  2

  ---

  

  Julius Tamale•150

  @julius-tamalePosted almost 2 years ago

  Hello @sahand-masoleh

  I find your comment useful to a problem I had encountered earlier regarding changing SVG color, I would love if you elaborated more or if you have some resources you could recommend so I can look into it I will truly be glad.

  Regards, Julius.

  0

  

  Sahand Masoleh•1,210

  @sahand-masolehPosted almost 2 years ago

  @julius-tamale Sure.

  I'm guessing what you want to do is something like this:

  svg:hover {
    color: red;
  }
  

  But it doesn't work. Right?

  Now if you look at your SVG, you have something like this for example:

  <svg
     width="100mm"
     height="100mm"
     viewBox="0 0 100 100"
  >
      <rect
         fill="#000"
         width="100"
         height="100"
         x="0"
         y="0" />
  </svg>
  

  What you need to do is to find where in your SVG there is a color hard-coded in, in this case the fill property on the rect, and change it to currentColor.

  0