I inserted several buttons in a form, each one has the function to change the color of the same SVG files, however I tried to make this exchange via css and it did not work, I think I'll need a js to change the fill of svg .
<!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">
<script>
/* Replace all SVG images with inline SVG */
$('cdn/ref1/gola.svg').each(function(){
var $img = $(this);
var imgID = $img.attr('id');
var imgClass = $img.attr('class');
var imgURL = $img.attr('src');
$.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = $(data).find('svg');
// Add replaced image's ID to the new SVG
if (typeof imgID !== 'undefined') {
$svg = $svg.attr('id', imgID);
}
// Add replaced image's classes to the new SVG
if (typeof imgClass !== 'undefined') {
$svg = $svg.attr('class', imgClass+' replaced-svg');
}
// Remove any invalid XML tags as per http://validator.w3.org
$svg = $svg.removeAttr('xmlns:a');
// Replace image with new SVG
$img.replaceWith($svg);
});
});
</script>
</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 onclick="mudaImagem(1)" >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 id="gola" class="svg-gola" src="cdn/ref1/gola.svg">
</div>
</div>
</div>
<!-- fim do codigo do preview-->
</body>
</html>
CSS Code
.tabela-simulacao{
margin-top: -5%;
}
.preview{
margin-top: 10%;
}
.logo{
position: relative;
margin-left: 40%;
margin-top:2%;
margin-bottom: 20px;
}
.card{
margin-left: 10%;
}
.form-group{
margin: 15px;
}
.form-check{
margin: 15px;
padding: 15px;
}
#gola: hover path{
fill: #fce57e;
}
I need the user to click the button, svg changes to the selected color. How to do this js?