0

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>
1
  • Si me gustaría cambiarlos dinámicamente :)
    – WTFChamp
    Commented el 12 dic. 2017 a las 4:07

1 respuesta 1

1

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:

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

1
  • 1
    En eso tienes razón @iuninefrendor, y no niego que la respuesta sea mala por el contrario está bien, solo que yo manejo el .svg como un < object > de esta forma: <object id="dots" type="image/svg+xml" data="img/points.svg" style="width: 50vw; height: auto;"> </object>
    – WTFChamp
    Commented el 14 dic. 2017 a las 3:28

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.