Получите мой SVG, чтобы оставаться в курсе других элементов - PullRequest
Новая
       9

Получите мой SVG, чтобы оставаться в курсе других элементов

0 голосов
/ 25 марта 2020

Я пытаюсь, чтобы мое изображение SVG оставалось встроенным в другие элементы, которые есть на странице, чтобы сделать его отзывчивым. Прямо сейчас, когда я уменьшаю размер браузера, SVG смещается вверх и вниз. Как я могу заставить его остаться в одном месте? Я включу фотографии того, что происходит, а также код. 

<div id="svgContainer">
    <svg id="svg" viewBox="50 54 100 100">
        <circle cx="100" cy="100" r="13.1" style="stroke: white; fill: white;"/>
        <text x="97" y="101" id="currentTemp" font-size="3" font-weight="bold" style="fill: #507282">{{currentTemp}}&#176;F</text>
        <circle class="background" cx="100" cy="100" r="6" stroke="#F5F2EA" />
        <circle class="background" cx="100" cy="100" r="9" stroke="#eddfbb" />
        <circle class="background" cx="100" cy="100" r="12" stroke="#DCE3E6" />
        <circle id="line1" class="overlayLine" cx="100" cy="100" r="6" stroke="#CDBD97" stroke-dasharray="0, 3000" stroke-dashoffset="126" transform="rotate(-90,100,100)" />
        <circle id="line2" class="overlayLine" cx="100" cy="100" r="9" stroke="#C9AC68" stroke-dasharray="0, 3000" stroke-dashoffset="188" transform="rotate(-90,100,100)" />
        <circle id="line3" class="overlayLine" cx="100" cy="100" r="12" stroke="#507282" stroke-dasharray="0, 3000" stroke-dashoffset="251" transform="rotate(-90,100,100)" />
    </svg>
</div>

CSS

@keyframes dash {
    to {
      stroke-dashoffset: 0;
    }
}
.background {
    stroke-width: 2.7;
    fill: none;
}
.overlayLine {
    fill: none;
    stroke-width: 2.7;
    animation: dash 2s linear forwards;
}
#svg{
    position: absolute;
    top: -425px;
    left: 335px;
}
#svgContainer{
    width: 100%;
}

JS

 function getRandomIntInclusive(min, max) {
     min = Math.ceil(min);
     max = Math.floor(max);
     return Math.floor(Math.random() * (max - min + 1)) + min; //The maximum is inclusive and the minimum is inclusive 
 }

 function setStop(id, radius, stop){
     var c = document.getElementById(id);
     c.className = "background";
     var stopVal = Math.PI * radius * 2 * (stop/10);
     c.setAttribute("stroke-dasharray", stopVal + ", 3000");
     c.setAttribute("stroke-dashoffset", stopVal);
     c.className = "overlayLine";
 }

 function randomStops(){
     setStop("line1", 6, getRandomIntInclusive(1, 10));
     setStop("line2", 9, getRandomIntInclusive(1, 10));
     setStop("line3", 12, getRandomIntInclusive(1, 10));
 }
 randomStops();

выглядит хорошо на полном экране

плохо при сжатии

1 Ответ

0 голосов
/ 27 марта 2020

Я временно работал с процентами в атрибутах 'left' и 'top' css. Если есть лучший способ сделать это, я хотел бы услышать.

...