Как сверстать такой элемент?

Question

[Иван Торопов]

Не приходит понимание, как можно адаптивно сверстать текущий элемент. В макете есть два варианта, в приоритете первый, но если не получится, то второй (прикрепил к вопросу изображения). В принципе второй элемент можно сделать с помощью chart.js, в частности через Doughnut chart, а текст и иконки разместить с помощью псевдоэлементов или абсолютного позиционирования.
При наведении на любой из 12ти "секторов" должно появляться окно, как на на прикрепленных изображениях, с нужным описанием этих элементов.
Может быть есть у кого-нибудь варианты?


P.S. вытащил весь код svg с помощью тестового редактора и на элементы повешал нужные события. Спасибо большое Ankhena, Антон Антон в комментариях, которые подсказали про инлайновый svg, мне в голову почему-то это не пришло сразу.

Comments

[Ankhena]

Взять SVG, положить фоном.
Поверх разместить текст, например, в vw.
Прибить абсолютом, считая от центра.

Сложность только в том, чтобы аккуратно всё написать.

[Антон Антон]

Ankhena, а зачем фоном и текст поверх? прям внутрь svg можно положить. При этом если svgбудет инлайновым, то еще и стили всякие и анимации с прочим можно прикрутить.

[Ankhena]

Антон Антон, можно и так, если это удобно для редактирования.

[Антон Антон]

Ankhena, ну лично я бы вообще генерил это все jsом из массива, чтобы автоматом все расставляло, максимальное удобство )

[szQocks]

Антон Антон, Ankhena а как вы при ховере будите менять ? получается изначально выглядеть должно как на 2 скрине, и когда нажимаешь на кружок, будет анимироваться как на первом, выходит что тут у вас решение тупо на полноценном js выйдет и тут в принципе можно забыть про фон и инлайн

[Антон Антон]

szQocks, ну инлайновый svg вполне себе двигается с помощью js (я на vuejs делал, например, https://yatr.fragster.ru/ https://github.com/FragsterAt/yatr - там основа - это svg)

[szQocks]

Антон Антон, да я понял что двигать через Js, это гемор на мой взгляд, тут можно всю логику на одном css написать и дивами если не ошибаюсь, попозже попробую

[Антон Антон]

szQocks, ну в данном случае можно и на css, просто сгенерить инлайновый svg с помощью js, можно даже на этапе сборки проекта. а внутри инлайнового svg вполне себе работают селекторы на сиблинг и ховер: https://codepen.io/FragsterAt/pen/KKJWomN

[Ankhena]

szQocks,

а как вы при ховере будите менять ?

если наведение на кружочки, то так и буду.
Если на весь "сектор", то инлайнить svg.

[szQocks]

Ankhena, при нажатии или наведении на кружочек, все эти элементы, из одной фигуры должны превратиться в другую, которая ещё куда-то на искосок

Антон Антон хороший пример, правда сложность тут не в появлении квадратика

[Ankhena]

szQocks,

при нажатии или наведении на кружочек, все эти элементы, из одной фигуры должны превратиться в другую, которая ещё куда-то на искосок

Это вы как до этого догадались?

Я вижу только это

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

[szQocks]

Ankhena , Антон Антон - не вышло на css, отдельно то что на картинках можно сверстать на голом css и то и другое, без svg, но сделать переход из одной в другую фигуры в другую, увы мне не по силам, переоценил себя

[szQocks]

Ankhena, по картинкам)), может автор не догадался, я хз, надо там уточнять у дизайнера что за анимация должна быть, когда из одной фигуру в другую превращается

[Ankhena]

szQocks, там нет речи про превращение одной картинки в другую.
Там написано, что это два варианта одного и того же, но первый предпочтительнее.

[szQocks]

Ankhena, хм, действительно, смотрю в книгу, вижу фигу - это про меня

[Иван Торопов]

Ankhena, действительно, с помощью svg можно сделать. Благодарю за наводку!

[Иван Торопов]

Ankhena, да, окно с описанием должно появляться при наведении на "сектор", исправил это в вопросе

[Иван Торопов]

Антон Антон, спасибо за идею, попробую сделать так