Как нарезать картинку и привязать к полигонам radio-кнопки?

Question

[Алексей]

Решил сделать квиз. Есть картинка с планом помещения. Я уже нарезал svg необходимых помещений. Перечитал множество статей - не могу разобраться, как привязать радио-кнопки к нужным помещениям. Основная задача, которую я себе поставил, чтобы каждое помещение выполняло роль радио-кнопки, подсвечивалось при наведении и соответственно присваивало значение определённой переменной. Присваивание и подсвечивание конечно сделаю сам...))) - главное изображение вместо радио-кнопки!

svg viewBox, clip-path, mask-image, polygon - чёрт ногу сломит...инструкций масса, а какую надо применять и как её использовать не могу разобраться.

Прошу не судить строго. Если есть возможность - дать пример кода для такой задачи!

Answer 1

[Stalker_RED]

Вот пример с подсветкой svg-элементов при наведении на ссылку

По такому-же принципу делается и обратное, изменение состояния html-элемента (чекбокса) при клике по svg-элементу.

Comments

[Алексей]

Спасибо за ответ и пример...
А если у меня сложный полигон, с большим количеством углов?
И вообще, как это свойство d для path получать и вообще viewBox генерить?

[Stalker_RED]

Алексей, не обязательно path, можно и polygon

[Алексей]

Stalker_RED, Спасибо ещё раз, сейчас буду пробовать

[Stalker_RED]

Алексей, сам формат описан в документации
https://developer.mozilla.org/ru/docs/Web/SVG/Tuto...

координаты вот так:

[Алексей]

Stalker_RED, И ещё вопрос. А svg polygon будет масштабироваться при изменении размера экрана и соответственно бэкграунд картинки?

[Stalker_RED]

Алексей, вы можете масштабировать сам <svg>
см свойство viewBox, ну и задавайте ему width/height

[Алексей]

Stalker_RED, Ещё раз спасибо тебе за решение...но есть нюанс - не могу разобраться...

Пишу функцию, чтобы снимать значение

$('input[name="one"]').change(function(){ 

    var one = $('input[name="one"]:checked').val();
    console.log(one);
});

При нажатии на сам input - всё прекрасно снимается (в консоли видно), а при нажатии на полигоны радиокнопки переключаются, а вот в консоли пусто...

Не подскажешь в чём дело?

[Stalker_RED]

Алексей, вы меняете радиокнопкам checked, но при этом не генерируется событие change
придется его принудительно создавать

[Stalker_RED]

Алексей,

Answer 2

[profesor08]

Привяжись к :checked состоянию кнопки, а потом +, ~ селекторами доберись до нужных элементов и отображай их.

<input type="radio" name="radio-selector" class="radio-1" checked>
<input type="radio" name="radio-selector" class="radio-2">

<svg>
  <polygon class="polygon-1"></polygon>
  <polygon class="polygon-2"></polygon>
</svg>

svg polygon {
  display: none;
}

.radio-1:checked ~ svg .polygon-1 {
  display: inline;
}
.radio-2:checked ~ svg .polygon-2 {
  display: inline;
}

Comments

[Алексей]

Я воспользовался генератором получил код с точками полигона, в смысле всю конструкцию

<svg>
  <clipPath>
   <polygon>
.....

Или вариант для CSS c правилом для класса -webkit-clip-path. Вот куда из в предложенном варианте воткнуть?

[profesor08]

<input type="radio" name="radio-selector" class="radio-1" checked>
<input type="radio" name="radio-selector" class="radio-2">

.radio-1:checked ~ img {
  clip-path: polygon(179px 301px,732px 315px,734px 50px,182px 59px);
}
.radio-2:checked ~ img {
  clip-path: polygon(179px 301px,455px 266px,734px 50px,52px 96px);
}