Товарищи, как сверстать такой блок?

Question

[Korifa]

В моб. и планшетной версии кружочки меньшего диаметра, а надписи не в центре кружка, а над, в этом и есть вся проблема: как это все грамотно сделать

Comments

[Алексей Скляров]

svg

[Korifa]

Алексей Скляров, а как настроить transform-origin, если я уменьшаю круги с помощьюc scale?

[Ankhena]

svg можно оставить только для кривой
круги и CSS'ом не плохо делаются
а дальше абсолюты и значения в %

Answer 1

[RAX7]

В моб. и планшетной версии кружочки меньшего диаметра

Если у svg задать viewBox, то всё будет пропорционально масштабироваться, но на мобилках будет очень мелко. Можно на js пересчитывать размер и положение объектов в зависимости от ширины экрана.

Comments

[Korifa]

да там тока размер кружочков и положение текста меняется сама дуга и корабль статичные,
красиво получилось!

[Korifa]

взял ваш кораблик, но что-то он у меня не появляется не могу понять почему
https://codepen.io/anon/pen/NmVrJe

[RAX7]

Korifa, поставь для shp0 fill: none и увидишь его

[Korifa]

RAX7, спасибо

[Korifa]

RAX7, все равно не могу разобраться: понял что надо viewbox использовать, но у вас кораблик не уменьшается, а у меня и кораблик и текст уменьшается на маленьком экране. Можно как-нибудь запретить уменьшаться этим элементам?
https://codepen.io/anon/pen/BeBGyy

[RAX7]

Korifa, так используй min-width для svg