Cambiar de color diferentes elementos de una imagen svg

publicado por: Anonymous

Quiero trabajar los elementos de un archivo .svg tales como el de < circle > que se observa en el código; pero de qué manera lo puedo hacer con javascript alguna idea u orientación?¿, Saludos a todos 🙂

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

solución

Primero hay que tener en cuenta que NO puedes trabajar directamente javascript en un .svg necesitas utilizar svg dentro de un html.

Para cambiar los colores dinámicamente dentro del svg te recomiendo utilizar Jquery con la función .css() utilizando el atributo fill para el color, puedes cambiarlo en un evento on click() o en un loop, pero dependerá de lo que necesites, te muestro un ejemplo utilizando un loop:

_x000D_

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<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">_x000D_
<g>_x000D_
<circle id="Circle1" class="st0" cx="9.4" cy="7.1" r="6.5"/>_x000D_
<circle id="Circle2" class="st1" cx="104.1" cy="7.1" r="6.5"/>_x000D_
<circle id="Circle3" class="st1" cx="198.7" cy="7.1" r="6.5"/>_x000D_
<circle id="Circle4" class="st1" cx="293.4" cy="7.1" r="6.5"/>_x000D_
<circle id="Circle5" class="st1" cx="388.1" cy="7.1" r="6.5"/>_x000D_
<circle id="Circle6" class="st1" cx="482.8" cy="7.1" r="6.5"/>_x000D_
</g>_x000D_
</svg>_x000D_
<script>_x000D_
$(document).ready(function(){_x000D_
CambiarColor();_x000D_
var i = 0;_x000D_
_x000D_
function CambiarColor() {_x000D_
   setTimeout(CambiarColor,3000);_x000D_
   var color = ["red","blue","yellow","green"];_x000D_
   $("#Circle1").css("fill", color[i]);_x000D_
   $("#Circle2").css("fill", color[i]);_x000D_
   $("#Circle3").css("fill", color[i]);_x000D_
   $("#Circle4").css("fill", color[i]);_x000D_
   $("#Circle5").css("fill", color[i]);_x000D_
   $("#Circle6").css("fill", color[i]);_x000D_
   i++;_x000D_
   if(i==color.length) i=0;_x000D_
}_x000D_
});_x000D_
</script>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *