1

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

2 Respostas 2

1

A tag 'Img' não tem esse suporte (de alterar componentes) para SVG, ele simplesmente renderiza como uma imagem matricial para o seu html. Só é possível alterar cor do SVG, se você alterar o código dentro do arquivo SVG. Para isso você copia o conteúdo dele para seu HTML, dentro de uma tag 'svg' e para mudar a cor basta somente alterar o atributo ' fill ' do svg . https://www.w3schools.com/html/html5_svg.asp

#feedback svg{fill: red;}
#feedback svg:hover{fill: blue;}
#feedback svg:active{fill: green;}
<button id="feedback">
    <svg xmlns="http://www.w3.org/2000/svg" width="35px" height="35px" viewBox="0 0 24 24">
    <path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 12h-2v-2h2v2zm0-4h-2V6h2v4z"></path>
    </svg>
</button>

Para alterar a cor usando javascript dinamicamente basta

document.getElementById("feedback").querySelector("svg").style.fill = "red";

Se o código svg for muito grande, use o external resource: https://css-tricks.com/svg-use-external-source/.

6
  • E para alterar em tempo real o fill? Devo usar js? Ou consigo alterar pelo html? Commented 26/03/2018 às 18:42
  • Você pode fazer com os dois, basta alterar o atributo fill (pode ser em CSS também) para a tag svg que você deseja.
    – Sveen
    Commented 26/03/2018 às 18:44
  • Este é meu primeiro projeto, sou bem leigo na área, pode dar um exemplo? ou elencar algum material sobre que possa estuda-lo? Commented 26/03/2018 às 18:45
  • Adicionei código para Javascript também, caso desejar
    – Sveen
    Commented 26/03/2018 às 19:13
  • Fiz os procedimentos como voces falaram, todos eles dao certo executando somente um svg, agrupei todos na mesma pagina e não altera a cor, subi os arquivos e o codigo para fenytuniformes.com.br/simulador ; onde estou errando? Commented 28/03/2018 às 13:41
0

Como o Sveen disse para controlar a cor do SVG ele deve estar dentro do HTML, e não em um referência esterna como <img src="imagem.svg">

Tendo o .SVG dentro do HTML vc consegue controla-lo com CSS ou JS se preferir.

Aqui fiz um exemplo simples com jQuery/css que vc pode trocar a cor do SVG clicando em botões.

$(".menu-item").click(function(event){
    event.preventDefault();     $(this).toggleClass("ativo").siblings().removeClass("ativo");
});
.menu-item {
    font-family: sans-serif;
    font-size: 16px;
    height: 50px;
    line-height: 50px;
    padding: 0 16px;
    text-decoration: none;
    color: #fff;
    display: inline-block;
    cursor: pointer;
}
#id1 {
    background-color: red;
}
#id2 {
    background-color: blue;
}
#id3 {
    background-color: green;
}
#id4 {
    background-color: gold;
}
#gola {
    fill: black;
    transition: fill 500ms ease;
}

#id1,#id2,#id3,#id4{
    transition: 500ms ease;
}

#id1.ativo,#id2.ativo,#id3.ativo,#id4.ativo {
    transform: scale(1.1);
}
#id1.ativo ~ #gola {
    fill: red;
}
#id2.ativo ~ #gola {
    fill: blue;
}
#id3.ativo ~ #gola {
    fill: green;
}
#id4.ativo ~ #gola {
    fill: gold;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div id="id1" class="menu-item">RED</div>
<div id="id2" class="menu-item">BLUE</div>
<div id="id3" class="menu-item">GREEN</div>
<div id="id4" class="menu-item">YELLOW</div>

<svg id="gola" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="1000" height="500" viewBox="0 0 1000 500">
    <path d="M210.000,61.921 C210.000,61.921 217.890,79.660 231.976,95.474 C248.466,113.986 271.532,131.000 271.532,131.000 C271.532,131.000 291.169,114.440 305.595,96.461 C317.925,81.093 325.373,63.895 325.373,63.895 L315.484,56.000 C315.484,56.000 290.401,63.637 267.137,63.895 C246.003,64.129 226.482,56.987 226.482,56.987 L226.482,60.934 L229.778,66.855 L233.075,70.803 C233.075,70.803 252.087,75.983 270.433,75.737 C288.896,75.489 306.694,69.816 306.694,69.816 C306.694,69.816 301.756,80.735 293.508,90.539 C283.289,102.686 269.335,114.224 269.335,114.224 C269.335,114.224 256.706,103.444 246.260,91.526 C236.395,80.272 228.679,67.842 228.679,67.842 L225.383,56.987 L217.692,56.987 L210.000,61.921 ZM628.639,65.868 C628.639,65.868 633.835,69.592 645.121,71.789 C656.643,74.033 674.419,74.750 690.171,74.750 C708.577,74.750 731.460,74.287 744.012,71.789 C753.274,69.947 755.000,65.868 755.000,65.868 L744.012,58.961 C744.012,58.961 719.219,62.165 693.468,61.921 C667.036,61.671 639.627,57.974 639.627,57.974 L628.639,65.868 Z" class="cls-1"/>
</svg>

3
  • Fiz os procedimentos como voces falaram, todos eles dao certo executando somente um svg, agrupei todos na mesma pagina e não altera a cor, subi os arquivos e o codigo para fenytuniformes.com.br/simulador ; onde estou errando? Commented 28/03/2018 às 13:42
  • Alexandre o que eu fiz é apenas um exemplo básico para vc ver como é possível fazer etc. Copiar e colar na sua página certamente não daria certo... O que eu fiz foi te dar um exemplo e um norte. Agora para funcionar na sua página de uma estudadinha em jQuery que é mais fácil pra vc entende o JS na início e rapidinho vc resolve seu problema. Mas resumindo a estrutura do meu CSS/HTML está diferente do seu então esses apontamentos "#id3.ativo ~ #gola" por exemplo não funcionam na sua página...
    – hugocsl
    Commented 28/03/2018 às 13:55
  • 1
    Se vc tiver alguma outra dúvida recomendo vc fechar essa pergunta e abrir outra com a seu "novo problema" pois sobre "Mudar a cor de um SVG por um botão" vc já resolver, agora vc precisa resolver a questão do seu site.
    – hugocsl
    Commented 28/03/2018 às 13:58

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 .