Изменение цвета SVG с помощью Javascript

Question

Я пытаюсь выяснить, когда я нажимаю мой «центр» и «правый» контейнер, цвет моего .SVG меняется на красный (из белого).

Мой текущий HTML является:

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

Answer 1

Насколько я знаю, что вам нужно сделать SVG инлайн, чтобы иметь возможность стиль, как это. Когда SVG встроен, вы можете использовать стиль «fill» для изменения цвета.

простофиля вопрос был дан ответ здесь:

img src SVG changing the fill color

Answer 2

Если SVG изображение прозрачно, оно должно быть возможно, просто установив его цвет фона на красный. Прежде всего, необходимо добавить атрибут ID к вашему IMG тегу:

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

Затем добавьте OnClick события в центральный и правые контейнеры, например:

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

Однако, если ваш SVG не является прозрачным, вам придется загружать SVG по-другому - не помещайте его в отдельный файл nav-icon.svg, но включайте его в сам HTML как набор тегов, просто вставляйте содержимое файла svg прямо в HTML, начиная с тегом <svg> ... И затем либо измените фон непосредственно в коде, либо создайте соответствующий тег внутри svg.