0

alguien que me ayude, dandome un link o un ejemplo, me han dado un mapa de una terreno, y quieren que en una página web administrable, el administrador pueda cambiar el color de ciertas secciones, todo depende si ya se rentaron o aun no, no tengo la mas minima idea de como hacer algo así. ayuda por favor

4
  • 1
    Primero necesitas un mapa de las parcelas de terreno. Tienes que dibujar cada parcela como un elemento <path> o <polygon>. Un elemento svg puede tener un stroke el equivalent de un borde y un fill o relleno. Exactamente como lo harías con elementos HTML puedes dar a las parcelas alquiladas una clase, y después en el css puedes cambiar el valor del fill, algo así: polygon{fill:green;} polygon.alquilado{fill:gold}. Si esto no te ayuda por favor edita tu pregunta. Un ejemplo sencillo y funcional sería ideal.
    – enxaneta
    el 20 feb. 2019 a las 19:42
  • esta exelente tu respuesta, pero lo que se quiere evitar es que el usuario administrador tenga que acceder al código para estar cambiando el color, se busca que seleccione el espacio a rentar, (que ya estan definidos los espacios en el archivo svg) y que ponga rentado o disponible. el 20 feb. 2019 a las 20:12
  • 1
    si tubieras un ejemplo me ayudaria bastante el 20 feb. 2019 a las 20:13
  • En paradigmadigital.com/dev/color-iconos-svg puedes ver un tutorial con ejemplos de cómo modificar colores y estados hover de distintas partes mediante CSS/SASS y cómo llamar a las imágenes usando mapas.
    – Alberto
    el 19 feb. 2020 a las 21:44

1 respuesta 1

2

Este es un ejemplo en el cual al hacer click en un polígono le añade o le quita la clase alquilado. Me imagino que estos polígonos son en realidad objetos y que al cambiar la clase cambia también el estatus de este objeto. Probablemente querrás guardar esto en una base de datos. Todo depende de lo que tienes

let polygons = Array.from(svg.querySelectorAll("polygon"));

polygons.forEach(p=>{
  p.addEventListener("click", ()=>{
    if(!p.alquilado){
    p.classList.add("alquilado");
    p.alquilado = true;
    }else{p.classList.remove("alquilado");
         p.alquilado = false;}
  })
})
polygon{fill:green; }
polygon.alquilado{fill:gold;}
<svg id="svg" viewBox="300 1150 270 200">

    <polygon id="a" 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 id="b" stroke="#000" points="390.334 1227.223 445.444 1209.89 463.307 1265.26 408.334 1278.111"/>
 
    <polygon id="c" stroke="#000" points="445.444 1209.89 502.777 1199 509 1258.334 493.765 1258.334 463.307 1265.26"/>


</svg>

1
  • eso es exactamente lo que quiero,, ya solo faltaria como guardar el estatus enuna base de datos el 21 feb. 2019 a las 16:09

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.