Change different color elements of a svg image

Question

Change different color elements of a svg image

Navigation

#1 by (1 votes)

0

I want to work with the elements of a .svg file such as the one in < circle > that is observed in the code; but in what way can I do with javascript any idea or guidance?, Greetings to all:)

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 489.3 14.2" style="enable-background:new 0 0 489.3 14.2;" xml:space="preserve">
 <style type="text/css">
   .st0{fill:#FFFFFF;}
   .st1{opacity:0.55;fill:#636363;}
 </style>
 <g>
   <circle id="Circle1" class="st0" cx="9.4" cy="7.1" r="6.5"/>
   <circle id="Circle2" class="st1" cx="104.1" cy="7.1" r="6.5"/>
   <circle id="Circle3" class="st1" cx="198.7" cy="7.1" r="6.5"/>
   <circle id="Circle4" class="st1" cx="293.4" cy="7.1" r="6.5"/>
   <circle id="Circle5" class="st1" cx="388.1" cy="7.1" r="6.5"/>
   <circle id="Circle6" class="st1" cx="482.8" cy="7.1" r="6.5"/>
</g>
</svg>

javascript html5 css svg

asked by WTFChamp 12.12.2017 в 03:31

source

1 answer

Take Variable JS and take it to PHP WITHOUT JQUERY Error connecting mysql base with java

score 1 · Accepted Answer

First you have to bear in mind that NO you can work directly javascript in a .svg you need to use svg within a html .

To change the colors dynamically within the svg I recommend using Jquery with the function .css() using the attribute fill for the color, you can change it in an event on click() or in a loop, but it will depend of what you need, I show you an example using a loop:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 489.3 14.2" style="enable-background:new 0 0 489.3 14.2;" xml:space="preserve">
<g>
<circle id="Circle1" class="st0" cx="9.4" cy="7.1" r="6.5"/>
<circle id="Circle2" class="st1" cx="104.1" cy="7.1" r="6.5"/>
<circle id="Circle3" class="st1" cx="198.7" cy="7.1" r="6.5"/>
<circle id="Circle4" class="st1" cx="293.4" cy="7.1" r="6.5"/>
<circle id="Circle5" class="st1" cx="388.1" cy="7.1" r="6.5"/>
<circle id="Circle6" class="st1" cx="482.8" cy="7.1" r="6.5"/>
</g>
</svg>
<script>
$(document).ready(function(){
CambiarColor();
var i = 0;

function CambiarColor() {
   setTimeout(CambiarColor,3000);
   var color = ["red","blue","yellow","green"];
   $("#Circle1").css("fill", color[i]);
   $("#Circle2").css("fill", color[i]);
   $("#Circle3").css("fill", color[i]);
   $("#Circle4").css("fill", color[i]);
   $("#Circle5").css("fill", color[i]);
   $("#Circle6").css("fill", color[i]);
   i++;
   if(i==color.length) i=0;
}
});
</script>