ddd_poka
@ddd_poka
разрабатываю мобильные приложения

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

Как сделать, чтобы 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>
  • Вопрос задан
  • 31 просмотр
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
24 июл. 2021, в 16:35
1500 руб./за проект
24 июл. 2021, в 15:36
50000 руб./за проект
24 июл. 2021, в 15:10
3000 руб./за проект