html, css. Как закрепить svg при изменении разрешения экрана?
Чтобы было более понятно - ссылка на видео (15сек.): https://www.youtube.com/watch?v=lCNOH_jApCI
Мой код:
<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>При изменении разрешения (соотношения сторон) - зеленые точки svg - съезжают. Как закрепить их, чтобы всегда были на одном месте. Заранее спасибо.