Tenho um SVG rasteirizado e inline em uma pagina. e preciso alterar a cor deste svg, conforme o usuario clica em um determinado botão. Nesse caso tenho varios botões, cada um responsável por alterar para uma cor. No entanto nao estou conseguindo fazer essa mudança, como programo cada botão? Segue o código; Subi o código tbm para a url www.fenytuniformes.com.br/simulador ,caso alguem aqueira olhar os svg's
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="ha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body background="background.jpg">
<div class="logo">
<img src="logo.png">
</div>
<div class="row">
<br>
<div class="card">
<form>
<div class="form-group">
<h5 align="center">Simulador de Uniformes</h5>
</div>
<div class="tabela-simulacao">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="unidadeVolume">Referencia:</label>
<select class="form-control" data-size="5" data-live-search="true" data-width="100%" name="unidadeVolume" required>
<option selected disabled>Escolha uma opcao</option>
<option>1010</option>
<option>2020</option>
<option>3030</option>
<option>4040</option>
<option>5050</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label for="unidadeVolume"> Gola:</label>
<button type="button" name="golaPreta" class="btn btn-dark">Preto</button>
<button type="button" class="btn btn-light btn-gola-branca">Branco</button>
<button type="button" class="btn btn-primary">Azul</button>
<button type="button" class="btn btn-success">Verde</button>
<button type="button" class="btn btn-danger">Vermelho</button>
</div>
<div class="form-group">
<label for="unidadeVolume">Corpo : </label>
<button type="button" class="btn btn-dark">Preto</button>
<button type="button" class="btn btn-light">Branco</button>
<button type="button" class="btn btn-primary">Azul</button>
<button type="button" class="btn btn-success">Verde</button>
<button type="button" class="btn btn-danger">Vermelho</button>
</div>
<div class="form-group">
<label for="unidadeVolume">Mangas:</label>
<button type="button" class="btn btn-dark">Preto</button>
<button type="button" class="btn btn-light">Branco</button>
<button type="button" class="btn btn-primary">Azul</button>
<button type="button" class="btn btn-success">Verde</button>
<button type="button" class="btn btn-danger">Vermelho</button>
</div>
<div class="form-group">
<label for="unidadeVolume">Punhos:</label>
<button type="button" class="btn btn-dark">Preto</button>
<button type="button" class="btn btn-light">Branco</button>
<button type="button" class="btn btn-primary">Azul</button>
<button type="button" class="btn btn-success">Verde</button>
<button type="button" class="btn btn-danger">Vermelho</button>
</div>
<div class="form-group">
<label for="unidadeVolume">Logo:</label>
<button type="button" class="btn btn-dark">Preto</button>
<button type="button" class="btn btn-light">Branco</button>
<button type="button" class="btn btn-primary">Azul</button>
<button type="button" class="btn btn-success">Verde</button>
<button type="button" class="btn btn-danger">Vermelho</button>
</div>
</div>
</div>
<!--codigo do preview -->
<div class="col-md-6">
<div class="card">
<div class="form-group">
<h5 align="center">Visualização:</h5>
<img src="cdn/ref1/gola.svg" style="z-index: 0;">
<img src="cdn/ref1/manga.svg" style="margin-top: -58%">
<img src="cdn/ref1/corpo.svg" style="margin-top: -63%">
</div>
</div>
</div>
<!-- fim do codigo do preview-->
</body>
</html>