Круговая диаграмма с возможностью выбора секторов

#html #css #html5 #css3 #svg

Задача
Местоположение – круг разделен на 8 частей + еще одна в центре итого 9. Каждая эта
часть указывает на район Москвы, как говорят: “Живу на 4 часа” т.е. юго-восток или
6 часов - юг, а центр – это садовое кольцо.




Так как этот фильтр находиться внутри form и должен отправляться выбранная значения,
в html получается 9 скрытых radio прикрепленным на label, 8 трапеции 1 круг в центре.

С бордером не получается, они перекрывает друг друга, так как они на самом деле прямоугольник,
но со скрытыми краями.

Возможно ли сделать такую конструкцию на CSS или на чем угодно?

Заранее спасибо!
    

Ответы

Ответ 1

В данном случае не обязательно делать 9 радио кнопок. Достаточно будет одного скрытого
инпута, а значения в него передавать из атрибута выбранного svg-элемента.

Я бы сделал так с использованием jQuery:



var loc = $('#location');
$('.filter').on('click', function() {
  $('.filter').attr('class', 'filter');
  $(this).attr('class', 'filter active');
  loc.val($(this).attr('data-location'));
  console.log(loc.val());
});
.filter {
  fill: #fff;
  stroke: #d1d1d1;
  stroke-width: 1;
  stroke-miterlimit: 10;
  cursor: pointer;
  transition: all 0.3s;
}

.filter:hover,
.filter.active {
  fill: #dcba89;
  stroke: #dcba89;
}

.as-console-wrapper {
  max-height: 66px!important;
}