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

Question

[Василь Бойко]

Answer 1

[Андрей Б.]

Сделай.

Comments

[Василь Бойко]

))

Answer 2

[Ivan Bogachev]

Слой номер раз: SVG картинка со схемой, вставляете ее в код страницы. Областям задаете какой-нибудь класс, чтобы селекторы были более понятными.

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

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

P.S.: Можно еще сделать, чтобы в плашках как бы вода с волнами наливалась при наведении мыши, но это уже совсем другая история...

Comments

[VoidVolker]

Текст вполне нормально встраивается в SVG.

[Ivan Bogachev]

VoidVolker, А если потом нужно будет менять количество текста? Не перерисовывать же эти плашки? А адаптировать как, чтобы текст не становился слишком маленьким/большим? На маленьких экранах тексты вообще лучше где-нибудь сбоку выводить, если все будет в картинке - голова лопнет этим заниматься. Сверстать куда проще.

[VoidVolker]

Ну так SVG — это же XML, так что точно так же любым текстовым редактором текст легко меняется. А вот для адаптивности — да, в целом имеет смысл текст отдельным слоем делать.

Answer 3

[VoidVolker]

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