Как сделать, чтобы svg были закреплены относительно div и img при разных разрешениях?

Question

[Дмитрий Аргус Мобайл]

Как сделать, чтобы svg были закреплены относительно div и img при разных разрешениях ( точнее разном соотношении сторон).
Чтобы было более понятно - записал видео:
https://www.youtube.com/watch?v=lCNOH_jApCI
Там три пульсирующие зеленые точки (svg) поверх img (код ниже).
При изменении разрешения - они съезжают.
Подскажите как их закрепить, чтобы всегда были на своем месте. Заранее спасибо.

Мой код:

<div id="sansara" class="col-80" style="position: relative">

              <img src="img/coleso_body_2.png" style="width: 100%; margin-left: 0.2%">

              <div class="d_logo_center" style="position: absolute; top: -10%">
                <svg id="pulse_0" class="pulse" x="50%" y="0px" width="100%" height="100px" viewBox="0 0 100 100">
                  <circle id="circle_0_0" cx="50" cy="50" r="4" />
                  <circle id="circle_0_1" class="pulse-circle" cx="50" cy="50" r="4" stroke-width="2" />
                  <circle id="circle_0_2" class="pulse-circle-2" cx="50" cy="50" r="4" stroke-width="2" />
                </svg>
              </div>

              <div class="d_logo_center" style="position: absolute; top: 30%">
                <svg class="pulse" x="0px" y="0px" width="100%" height="100px" viewBox="0 0 100 100">
                  <circle id="circle_1_0" cx="50" cy="50" r="4" />
                  <circle id="circle_1_1" class="pulse-circle" cx="50" cy="50" r="4" stroke-width="2" />
                  <circle id="circle_1_2" class="pulse-circle-2" cx="50" cy="50" r="4" stroke-width="2" />
                </svg>
              </div>

              <div class="d_logo_center" style="position: absolute; top: 63%">
                <svg class="pulse" x="0px" y="0px" width="100%" height="100px" viewBox="0 0 100 100">
                  <circle id="circle_2_0" cx="50" cy="50" r="4" />
                  <circle id="circle_2_1" class="pulse-circle" cx="50" cy="50" r="4" stroke-width="2" />
                  <circle id="circle_2_2" class="pulse-circle-2" cx="50" cy="50" r="4" stroke-width="2" />
                </svg>
              </div>
            </div>

Comments

[Ankhena]

Мой ежедневный ответ :))

https://jsfiddle.net/Ankhena/uxrcj59y/
Как сверстать список который обтекает полукруг?

Если вы меняете пропорции картинки, то придется доработать с учетом этого.