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
1 respuesta
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>
-
eso es exactamente lo que quiero,, ya solo faltaria como guardar el estatus enuna base de datos Commented el 21 feb. 2019 a las 16:09
<path>
o<polygon>
. Un elemento svg puede tener unstroke
el equivalent de un borde y unfill
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.