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>