Change the color of an SVG by a button

Question

Change the color of an SVG by a button

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

I have an inline and inline SVG on a page. and need to change the color of this svg, as the user clicks on a particular button. In this case I have several buttons, each one responsible for changing to a color. However I am not able to make this change, how do I program each button? Follow the code; I uploaded the code tbm to the url www.fenytuniformes.com.br/simulador, in case someone would look at the 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>

javascript html css svg

asked by anonymous 26.03.2018 / 20:32

2 answers

How to create this view in postgres? How to use a Figma layout in Android Studio?

score 0 · Answer 1

The ' Img ' tag does not have this support (for changing components) for SVG , it simply renders as a matrix image for your html. You can only change SVG color if you change the code inside the SVG file. To do this you copy the contents of it to your HTML, inside a svg tag, and to change the color, just change the ' fill ' attribute of svg. link

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

To change the color using javascript dynamically enough

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

If the svg code is too large, use the external resource: link .

score 0 · Answer 2

As Sveen said to control the color of SVG it should be inside HTML, not in an external reference like <img src="imagem.svg">

Having .SVG inside HTML you can control it with CSS or JS if you prefer.

Here I made a simple example with jQuery/css that you can change the color of SVG by clicking on buttons.

$(".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><divid="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>