Как можно изменять размер заполнения круга синим цветом с помощью input

Question

Всем привет! Кто знает, как можно изменять размер svg таким образом, как на этом сайте? https://cscraft.net/

Выберите оружие и перемещайте ползунок

Answer 1

Для решения необходимо взять два круга.
Первый будет красного цвета, второй круг с изменением длины будет синего цвета.

Анимация рисования синего круга в зависимости от положения ползунка input реализована с помощью изменения атрибута stroke-dasharray

Для корректной работы необходимо точно вычислить полную длину окружности

let perimetr = 50 * 2 * Math.PI;, где 50 это радиус окружности

// Вычисление длины окружности
let perimetr = 50 * 2 * Math.PI;
let _input = document.querySelector("[type='range']");

_input.addEventListener("input",()=>{  
  replace_weapons();  
})

window.addEventListener("load",()=>{  
  replace_weapons();  
})

function replace_weapons(){
  let value = Number(_input.value);
  let dash = perimetr * value / 360;
  let space = perimetr - dash;
  test.style.strokeDasharray = dash + " " + space
  
}

svg
{width:75vh;
 display:block;
 background:#1E214A;
transform:rotate(-90deg)}

div{
 position:relative;
 top:2em;
 width:90vh;
 height:1em;
 
}



#track {
fill:none;
stroke:url(#red_Gr);
stroke-width:8;
}

#test{
fill:none;
stroke:url(#blue_Gr);
stroke-width:8;
stroke-linecap:round;
stroke-dasharray: 50 450;

}

<svg viewBox="0 0 200 200" style="border:2px solid red;"> 
 <defs>
 <linearGradient id="blue_Gr" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
        <stop offset="40%" stop-color="hsl(206, 53%, 46%)" />
        <stop offset="100%" stop-color="hsl(186, 100%, 57%)" />
        
      </linearGradient>  
 <linearGradient id="red_Gr" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
        <stop offset="20%" stop-color="hsl(347, 100%, 73%)" />
        <stop offset="100%" stop-color="hsl(5, 90%, 81%)" />
        
      </linearGradient>       
 </defs> 
         
   
    <!-- Полный красный круг, который выполняет роль трассы движения -->
  <circle id="track" cx="100" cy="100" r="50" ></circle>
   
   <!-- Синий круг с изменяемой длиной -->
    <circle id="test" cx="100" cy="100" r="50" > </circle>
  
</svg>
<div><input type="range" min="5" max = "270" value="30" /></div>

БЛОГ НА HUSL

Как можно изменять размер заполнения круга синим цветом с помощью input

Ответы (1 шт):