Как сделать подписи к рисунку на сайте, чтобы они были прикреплены к изображению?

Question

[Александра Нев]

Есть схема-рисунок с подписями


Поставила подписи через position: absolute; В качестве линии было использовано border-bottom. Когда меняется масштаб в браузере, все съезжает. Как это можно сверстать, чтобы подписи не уезжали?

Comments

[Moskus]

Рисовать, мешая картинки, текст и оформление блочных элементов в HTML - извращение. Сделайте это в одном SVG.

Answer 1

[Максим]

https://codepen.io/topicstarter/pen/Gwzqoq вот собственно сама реализация на SVG

Comments

[Александра Нев]

круто, спасибо)

[Александра Нев]

А вы это в каком-то приложении сделали? Писать это вручную было бы долго)

[Максим]

Александра Нев, Inkscape

Answer 2

[Stalker_RED]

Задавать позицию в em или процентах, или не мучаться. и загнать надписи в SVG.

Comments

[Александра Нев]

Я и так задаю в процентах, но это не помогает. То есть надписи надо сделать в виде картинки svg и поместить в качестве изображения? А линии тогда тоже в виде изображения сделать?

[Stalker_RED]

Александра Нев, можно все целиком сделать в SVG, и сами эти плиты, и линии к ним, и надписи.