Как правильно разместить html плашку на svg?

Question

[Александр]

Есть картинка с маппинг разметкой

Исходное

На ней нужно разместить вот такие плашки, сами плашки - html верстка

Результат

Вопрос в том как их грамотно расположить в svg поле? абсолютное позиционирование не поможет, плашка будет ездить по картинке

Кусок верстки

<div class="level-plan">
                    <img src="assets/dimg/level-plan.png">
                    <svg viewBox="0 0 569 548">
                        <path class="room-2" d="M 8.3910483,100.04711 H 49.378092 L 49.700825,11.295642 207.51708,10.327444 V 182.9894 l -39.37338,0.32273 -0.64547,-11.94111 -159.4299143,-0.32273 z"></path>
                        <path class="room-1" d="M 213.00353,67.128386 274,66.482921 274.32273,10.972909 h 98.11072 L 373.07892,184.28033 213.649,183.63486 Z"></path>
                        <path class="room-2" d="m 378.82267,9.8892408 h 147.87777 l 0.91282,89.9133332 h 31.9489 V 171.45939 H 400.27408 v 12.77956 h -21.90782 z"></path>
                        <path class="room-2" d="m 406.66386,176.93635 152.44189,-0.45642 1.36924,118.21093 h -38.33868 v 79.87225 H 405.29462 Z"></path>
                        <path class="room-3" d="m 351.4379,332.11672 h 49.749 V 377.758 H 560.47499 V 538.87174 H 370.60724 V 486.84068 H 313.55563 V 355.39377 h 38.7951 z"></path>
                        <path class="room-sell" d="m 167.50352,355.39377 h 41.53357 v 86.26203 h -5.93337 v 97.67236 H 48.836176 V 450.32765 H 8.2154314 V 379.12724 H 167.95993 Z"></path>
                        <path class="room-2" d="M 8.6718443,176.02352 H 163.3958 V 374.1067 H 47.92335 V 297.42934 H 7.7590186 Z"></path>
                    </svg>
                </div>