@ferdasfarmazone
Верстальщик!

Сделать такую карту SVG?

5b1648110cc9a073145486.gif
  • Вопрос задан
  • 316 просмотров
Решения вопроса 3
sfi0zy
@sfi0zy Куратор тега CSS
UI developer. Верстаю неверстаемое.
Слой номер раз: SVG картинка со схемой, вставляете ее в код страницы. Областям задаете какой-нибудь класс, чтобы селекторы были более понятными.

Слой номер два: Плашки с текстом. Их удобно не в картинку пихать, а верстать на html/css и располагать поверх картинки с помощью абсолютного позиционирования или трансформаций. Если сообразить для картинки viewbox='0 0 100 100', то даже считать ничего не нужно будет.

Дальше на css на :hover/:focus по областям показываете плашки с текстом. Можно это на :nth-child построить или еще как-нибудь - смотрите, что будет удобнее. Ну и самим областям меняете fill на оранжевый.

P.S.: Можно еще сделать, чтобы в плашках как бы вода с волнами наливалась при наведении мыши, но это уже совсем другая история...
Ответ написан
VoidVolker
@VoidVolker
Легко делается в любом векторном редакторе (например inkscape), в том числе вместе с текстом: активным элементам даются осмысленные названия, классы и идентификаторы. Далее SVG встраивается целиком в HTML код (сразу или через AJAX) — чтобы использовать классы и скрипты, в скрипте активным элементам назначаем показ всплывающих подсказок на событие hover.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы