Деактивация отдельных путей SVG - HTML - PullRequest
Новая
       22

Деактивация отдельных путей SVG - HTML

0 голосов
/ 04 июля 2018

Я собираюсь использовать этот пример в качестве руководства для моего следующего проекта: https://parall.ax/examples/svg_map

Создатель использовал SVG с активными элементами, расположенными поверх изображения PNG. Мне было бы интересно узнать, могу ли я включить SVG с неактивными элементами или «путями»?

Я бы хотел, чтобы определенные элементы ничего не делали, когда они "зависали" или "щелкали". Таким образом, они будут добавлять к общей картине, но не будут активными.

Любая помощь будет принята с благодарностью. Спасибо.

1 Ответ

0 голосов
/ 05 июля 2018

Лично я бы не последовал этому примеру. Человек, который создал это, использовал довольно сложный способ достижения этого результата. Есть гораздо более простые способы.

Например, вот упрощенная карта SVG с небольшим количеством CSS. Только прямоугольники с классом «hoverable» имеют эффект переворачивания.

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

.hoverable:hover {
  fill: blue;
}
<svg width="400" viewBox="0 0 100 100">
  <rect x="50" y="10" width="20" height="20" fill="red"/>
  <rect x="50" y="31" width="30" height="20" fill="orange" class="hoverable"/>
  <rect x="30" y="52" width="55" height="20" fill="gold" class="hoverable"/>
  <rect x="10" y="73" width="30" height="20" fill="indianred"/>
  <rect x="41" y="73" width="30" height="25" fill="darkorange" class="hoverable"/>
</svg>
...