3

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

введите сюда описание изображения введите сюда описание изображения

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

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

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

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

1
  • svg не предлагать?
    – slippyk
    24 авг 2017 в 11:09

1 ответ 1

4

В данном случае не обязательно делать 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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="location">
  <svg xmlns="http://www.w3.org/2000/svg" width="103.313" height="103.375" viewBox="0 0 103.313 103.375">
    <path class="filter" data-location="8" d="M51.661 51.688L15.309 15.336C25.347 5.297 37.464.278 51.661.278v51.41z"/>
    <path class="filter" data-location="7" d="M51.661 51.688H.25c0-14.197 5.02-26.314 15.058-36.353l36.353 36.353z"/>
    <path class="filter" data-location="6" d="M51.661 51.688L15.309 88.041C5.27 78.003.25 65.885.25 51.688h51.411z"/>
    <path class="filter" data-location="5" d="M51.661 51.688v51.41c-14.197 0-26.314-5.019-36.353-15.058l36.353-36.352z"/>
    <path class="filter" data-location="4" d="M51.661 51.688l36.353 36.353c-10.038 10.039-22.156 15.058-36.353 15.058V51.688z"/>
    <path class="filter" data-location="3" d="M51.661 51.688h51.41c0 14.196-5.019 26.314-15.058 36.353L51.661 51.688z"/>
    <path class="filter" data-location="2" d="M51.661 51.688l36.353-36.353c10.039 10.039 15.058 22.156 15.058 36.353H51.661z"/>
    <path class="filter" data-location="1" d="M51.661 51.688V.278c14.196 0 26.314 5.02 36.353 15.058L51.661 51.688z"/>
    <circle class="filter" data-location="9" cx="52" cy="52" r="20"/>
  </svg>
  <input type="hidden" id="location" />
</div>

1
  • Огромное спасибо! Очень выручил... надо срочно изучить svg )) 24 авг 2017 в 17:40

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.