0

I am trying to figure out when I click my "center" and "right" container the colour of my .SVG changes to red (from white).

My current html is:

<nav>
        <span class="nav-btn"> <img src="nav-icon.svg" style="width: 60px;height: 60px;"></span>
        <ul class="nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Prices</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>

<div class="container" id= "left" >
        <h1 style="color:white"><a>HAIR</a></h1>
    </div>

    <div class= "container" id= "center">
        <h1 style="color:white"><a>BEAUTY<a/></h1>
    </div>

    <div class="container" id= "right">
        <h1 style="color:white"><a>BARBERS</a></h1>
    </div>
</div>
Lumi Lu
  • 3,289
  • 1
  • 11
  • 21
Clarke
  • 47
  • 1
  • 9

2 Answers2

0

As far as I'm aware, you need to make the SVG inline to be able to style like this. Once the SVG is inline, you can use the "fill" style to change the colour.

A dupe question has been answered here:

img src SVG changing the fill color

Community
  • 1
  • 1
Jay Hewitt
  • 1,116
  • 8
  • 16
0

If the SVG image is transparent, it should be possible by simply setting it's background color to red. First you need to add an ID attribute to your img tag:

<img src="nav-icon.svg" id=mysvg ...>

Then you add onClick event to your center and right containers, like this:

 <div class= "container" id= "center" onClick="$('#mysvg').css('background-color','red')">

However if your svg is not transparent, you will need to load the SVG differently - do not put it in a separate file nav-icon.svg, but include it in the HTML itself as a set of tags, simply paste the contents of the svg file directly to the HTML, starting with the <svg> tag ... And then either modify the background directly in the code, or style the appropriate tag inside svg.

Tomas M
  • 6,919
  • 6
  • 27
  • 33