1

tengo que hacer una practica que consiste en hacer un semáforo en svg, y este tenga un botón que cuando clicas sobre el se encienda el botón rojo, vuelves a hacer clic y cambia al amarillo y así en bucle.Tengo ya todo creado pero dentro de la función del evento del botón no se que estructura debe llevar para que funcione. He probado varias veces pero no funciona. Esto es lo que tengo.

    <!DOCTYPE html>
    <html>
    <body>
    
    --Creacion del boton--
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="240" height="300" wtx-context="1961E797-4DAC-4F34-905E-F8851699E8EE">
      <style type="text/css">
        rect[role="button"] { fill: blue; }
        rect[aria-pressed="cambiar"] 
      </style>
      <script>
    
      //Funcion con el evento del boton
    
        function buttonEvent(event) {
            /*var variable1=document.getElementById('rojo')
    		    var variable2=document.getElementById('amarillo')
    		    var variable3=document.getElementById('verde')
    	
          if (event.type == "click" && event.button == 0) {
            variable1.src="semaforo_rojo.png";
    
    	    var SVGDocument = event.target.ownerDocument;	
          }
          */
        }
        
      </script>
      <g id="layer1" cursor="pointer" onkeydown="return buttonEvent(evt);" onclick="return buttonEvent(evt);">
        <rect role="button" aria-pressed="cambiar" width="220" height="80" ry="40" x="10" y="10" id="ButtonBase" style="stroke:none"/>
        <rect width="250" height="80" ry="40" x="10" y="10" id="ButtonGlow" pointer-events="none" style="fill:url(#radialGradient3165);stroke:none"/>
        <text id="texto" x="120" y="66" pointer-events="none" xml:space="preserve" style="font-size:40px;text-align:center;text-anchor:middle;fill:#ffffff;stroke:none;font-family:Sans">Cambiar</text>
        <path d="m 50,15 140,0 c 11.08,0 22.51667,10.914008 20,20 C 208.16563,41.622482 201.08,40 190,40 L 50.00005,40 C 38.92005,40 31.834332,41.622512 30,35 27.483323,25.914009 38.92,15 50,15 z" id="ButtonHighlight" pointer-events="none" style="fill:url(#linearGradient3113)"/>
      </g>
    </svg>
    
    
    --Creacion del semaforo--
    
    <svg width="400" height="580">
      <rect x="	80" y="120" rx="20" ry="20" width="150" height="400"
      style="fill:black;stroke:grey;stroke-width:5;opacity:0.75" />
      <circle id="rojo" cx="154" cy="200" r="55" width="150" heigth="200"
      style="fill:red;stroke:darkred;stroke-width:5;opacity:1" />
      <circle id="amarillo" cx="154" cy="325" r="55" width="150" heigth="200"
      style="fill:yellow;stroke:#67560f;stroke-width:5;opacity:1" />
      <circle id="verde" cx="154" cy="450" r="55" width="150" heigth="200"
      style="fill:green;stroke:darkgreen;stroke-width:5;opacity:1" />
    
    </svg>
    
    </body>
    </html>

  

1
  • Lo siento soy nuevo en esto, exactamente que eso de editar? porque no entiendo mucho gracias.
    – Alex
    Commented el 31 ene. 2019 a las 20:09

2 respuestas 2

0

He dejado tu SVG aunque hice algunos cambios: En el segundo svg he movido los estilos en el css porque he considerado que el svg era demasiado verboso. Si quieres puedes ponerlos de nuevo en el svg.

Cuando pones css en un elemento svg es mejor hacerlo así:

<style type="text/css">
        <![CDATA[
        /* los estilos van aquí */
       ]]> 
      </style>

A continuación viene mi solución: estoy utilizando 3 booleanos r (para el rojo), a (para el amarillo) y v (para el verde) que al inicio son false. Al hacer click el el botón el valor de los 3 booleanos puede cambiar en función de si lo quiero encendido o apagado. Espero que esto sea lo que necesitas.

let r = false,
  a = false,
  v = false;
  let rojo = document.querySelector(".rojo");
  let amarillo = document.querySelector(".amarillo");
  let verde = document.querySelector(".verde");
  let luces = semaforo.querySelectorAll("circle");


function buttonEvent() {
   //primero apagas todas las luces apagadas
  luces.forEach(l => {
    l.classList.remove("encendido");
  });
  // después enciendes la que toca
  if (r) {
    r = false;
    a = true; amarillo.classList.add("encendido");
    v = false;
  } else if (a) {
    r = false;
    a = false;
    v = true; verde.classList.add("encendido");
  } else if (v) {
    r = true; rojo.classList.add("encendido");
    a = false;
    v = false;
  } else {
    r = true; rojo.classList.add("encendido");
  } 
}

document.getElementById("layer1").addEventListener("click", buttonEvent);
.rojo{fill:red;stroke:darkred;}
.amarillo{fill:yellow;stroke:#67560f;}
.verde{fill:green;stroke:darkgreen;}
/*la opacidad de las luces apagadas es .5*/
circle{stroke-width:5;opacity:.5}
/*cuando una luz está encendida la opacidad cambia a 1*/
.encendido{opacity:1}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="240" height="300" wtx-context="1961E797-4DAC-4F34-905E-F8851699E8EE">
      <style type="text/css">
        <![CDATA[
        rect[role="button"] { fill: blue; }
        rect[aria-pressed="cambiar"] 
       ]]> 
      </style>
 
      <g id="layer1" cursor="pointer">
        <rect role="button" aria-pressed="cambiar" width="220" height="80" ry="40" x="10" y="10" id="ButtonBase" style="stroke:none"/>
        <rect width="250" height="80" ry="40" x="10" y="10" id="ButtonGlow" pointer-events="none" style="fill:url(#radialGradient3165);stroke:none"/>
        <text id="texto" x="120" y="66" pointer-events="none" xml:space="preserve" style="font-size:40px;text-align:center;text-anchor:middle;fill:#ffffff;stroke:none;font-family:Sans">Cambiar</text>
        <path d="m 50,15 140,0 c 11.08,0 22.51667,10.914008 20,20 C 208.16563,41.622482 201.08,40 190,40 L 50.00005,40 C 38.92005,40 31.834332,41.622512 30,35 27.483323,25.914009 38.92,15 50,15 z" id="ButtonHighlight" pointer-events="none" style="fill:url(#linearGradient3113)"/>
      </g>
    </svg> 



<svg width="400" height="580" id="semaforo">
      <rect x="	80" y="120" rx="20" ry="20" width="150" height="400"
      style="fill:black;stroke:grey;stroke-width:5;opacity:0.75" />
      
      <circle class="rojo" cx="154" cy="200" r="55" width="150" heigth="200"
       />
      
      <circle class="amarillo" cx="154" cy="325" r="55" width="150" heigth="200" />
      
      <circle class="verde" cx="154" cy="450" r="55" width="150" heigth="200"
      style="" />
    
    </svg>

1
  • Te lo agradezco de veras, muchas gracias, funciona correctamente.
    – Alex
    Commented el 1 feb. 2019 a las 19:04
0

Igualmente dejo aquí otro código que he conseguido que funcione por si alguien desea tener más opciones de realizar este ejercicio.

//Creacion de los objetos svg

Cambiar

//Funcion del boton con sus variables definidas function buttonEvent(event) { if (event.type == "click" && event.button == 0) {

    var target = event.target;
    var SVGDocument = event.target.ownerDocument;
    var para = SVGDocument.getElementById("circle1");
        var cuidado = SVGDocument.getElementById("circle2");
        var adelante = SVGDocument.getElementById("circle3"); 
    var cambio = SVGDocument.getElementById("boton");    

//Serie de cambios del semaforo if (cambio.getAttribute("value")=="1") { para.setAttribute("fill","darkred"); para.setAttribute("stroke","grey"); cuidado.setAttribute("fill", "yellow"); cuidado.setAttribute("stroke", "#8f5a03"); adelante.setAttribute("fill", "darkgreen"); cambio.setAttribute("value", "2"); } else if (cambio.getAttribute("value")==2) { cuidado.setAttribute("fill", "#8f5a03"); cuidado.setAttribute("stroke", "grey"); adelante.setAttribute("fill", "green"); adelante.setAttribute("stroke", "darkgreen"); cambio.setAttribute("value", "3"); } else if (cambio.getAttribute("value")==3) { adelante.setAttribute("fill", "darkgreen"); adelante.setAttribute("stroke", "grey"); cuidado.setAttribute("fill", "yellow"); cuidado.setAttribute("stroke", "#8f5a03"); cambio.setAttribute("value", "4"); } else if (cambio.getAttribute("value")==4) { cuidado.setAttribute("fill", "#8f5a03"); cuidado.setAttribute("stroke", "grey"); para.setAttribute("fill", "red"); para.setAttribute("stroke","darkred"); cambio.setAttribute("value", "1"); }

} 

}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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