0

La cosa esta asi... tengo un sistema en el cual traigo informacion sobre viviendas de una base de datos y quiero que en un mapa SVG que realice se muestren de diferente color las DISPONIBLES, VENDIDAS y APARTADAS. Asi mismo que cuando cambie el estado de una de estas se actualice el color. Pienso que este codigo me puede ayudar, pero de verdad no se bien como implementarlo.

como cambiar color de secciones de imagen svg?

Espero puedan ayudarme.

1 respuesta 1

0

Si necesitas actualizar los valores de una base de datos necesitas un formulario y unos elementos input. En este ejemplo en el svg hay 3 solares y en el formulario, en el mismo orden hay 3 <input type="number"> aunque probablemente quieras que sean type="hidden"

En el código utilizo números: 0 para solares disponibles, 1 para solares vendidos y 2 para los apartados.

// el array de los polígonos
let polygons = Array.from(svg.querySelectorAll("polygon"));
// el array de los inputs
let inputs = Array.from(document.querySelectorAll("input"));

//para cada polígono del array de los polígonos
polygons.forEach((p,i)=>{
    // recupera la clase de este polígono
    let laClase = p.getAttribute("class");
    // recupera el input correspondiente que tiene el mismo index en el array de los inputs
    let elInput = inputs[i];
    // el tipo de solar es el último caracter de la cadena de texto laClase
    let n = Number(laClase[laClase.length-1]);
    
    //cada vez que haces clic en el polígono
    p.addEventListener("click", ()=>{
    // n crece
    n++
    // establece el valor de la clase del polígono
    p.setAttribute("class","solar" + n%3); 
    // establece el valor del atributo value del input correspondiente
    elInput.value = n%3;    
  })
})
polygon.solar0{fill:green; }
polygon.solar1{fill:gold;}
polygon.solar2{fill:skyblue;}
<form method="post" action="">
  <input type="number"  value="1" disabled />
  <input type="number"  value="0" disabled/>
  <input type="number"  value="2" disabled/>
</form>

<svg id="svg" viewBox="300 1150 270 200">

    <polygon class="solar1" stroke="#000" 
             points="339 1265.26 351.666 1240.334 390.334 1227.223 408.334 1278.111 365 1294.111 346.556 1286.778"/>
    
    <polygon class="solar0" stroke="#000" points="390.334 1227.223 445.444 1209.89 463.307 1265.26 408.334 1278.111"/>
 
    <polygon class="solar2" stroke="#000" points="445.444 1209.89 502.777 1199 509 1258.334 493.765 1258.334 463.307 1265.26"/>


</svg>

1
  • 1
    Hey! Muchas gracias, voy a intentar con la opcion que me das. Si tengo alguna duda al respecto te estare molestando de nuevo ¿vale? :) Commented el 10 may. 2019 a las 17:52

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.