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>