2

Inseri vários botões em um form, cada um tem a função de trocar a cor de um mesmo arquivos SVG, no entanto tentei fazer essa troca via css e nao deu certo, acho que precisarei de um js pra trocar o fill do 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>

Codigo do CSS

.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;
}

Preciso que, ao usuario clicar no botão, o svg mude para a cor selecionada. Como fazer esse js?

1
  • Precisaríamos acessar o arquivo cdn/ref1/gola.svg
    – Sam
    Commented 20/03/2018 às 20:20

1 Resposta 1

0

Para trocar a cor do SVG pode tentar isso:

// função para trocar a cor do svg
function mudarCor(svgId, cor){
    $("#" + svgId).css({fill: cor});
};

// adicionar um event listener que se o usuario clicar no botão desejado ele ative a função de trocar a cor do svg 
$("#buttonId").click(() => {
    mudarCor("svgId", "black");
});

Ou se preferir JavaScript puro, sem o jQuery:

// função para trocar a cor do svg
function mudarCor(svgId, cor){
    // Caso tenha um "path" use: document.getElementById(svgId).firstChild.style.fill = cor;
    document.getElementById(svgId).style.fill = cor;
};

// adicionar um event listener que se o usuario clicar no botão desejado ele ative a função de trocar a cor do svg 
document.getElementById("#buttonId").addEventListener("click", () => {
    mudarCor("svgId", "black");
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .