Change the color of an SVG by a button

Asked

Viewed 1,557 times

1

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

  • https://answall.com/questions/46582/mudar-cor-do-svg-no-hover/296064 Similar

2 answers

1

The tag 'Img' does not have this support (to change components) for SVG, it simply renders as a matrix image for your html. It is only possible to change SVG color if you change the code within the SVG file. For this you copy its content to your HTML, within a tag 'svg' and to change the color just change the attribute ' Fill ' 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>

To change the color using javascript dynamically is enough

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

If svg code is too large, use External Resource: https://css-tricks.com/svg-use-external-source/.

  • And to change Fill in real time? Should I use js? Or can I change it by html?

  • You can do both, just change the Fill attribute (can be in CSS too) to the svg tag you want.

  • This is my first project, I am very lay in the area, can you give an example? or list some material on which I can study it?

  • I added code for Javascript too, if you want

  • I did the procedures as you said, all of them give right running only one svg, I grouped all on the same page and does not change the color, uploaded the files and the code to fenytuniformes.com.br/simulator ; where I am missing?

  • You didn’t make the appends of the click buttons events

Show 1 more comment

0

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

Having . SVG inside the 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 the SVG by clicking 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>

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

  • I did the procedures as you said, all of them give right running only one svg, I grouped all on the same page and does not change the color, uploaded the files and the code to fenytuniformes.com.br/simulator ; where I am missing?

  • Alexandre what I did is just a basic example for you to see how it is possible to do etc. Copy and paste on your page would certainly not work... What I did was give you an example and a north. Now to work on your page a little study in jQuery that is easier for you to understand the JS in the beginning and quickly you solve your problem. But summarizing the structure of my CSS/HTML is different than yours so these notes "#id3.active ~ #collar" for example do not work on your page...

  • 1

    If you have any other questions I recommend you close this question and open another one with your "new problem" because about "Change the color of an SVG by a button" you already solve, now you need to resolve the issue of your site.

Browser other questions tagged javascript html css svg

You are not signed in. Login or sign up in order to post.