БЛОГ НА HUSL


Поэтапное заполнение дуги окружности в зависимости от передаваемого значения из VUE

Автор вопроса: peirw

Не догоняю как реализовать заполнение вектора в зависимости от значения переменной. Есть вектор круга, его нужно заполнять красным цветом в зависимости от значения "{{ characters[i].mainLVL }}". В VUE я написал - mailLVL: 0; Буду очень сильно благодарен тому кто поможет! Если что это кусок из интерфейса. Ниже приложил скриншот как должно заполнятся

<div class="vectorlevel" width="100%" height="100%">
                <svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M0 60C0 93.1371 26.8629 120 60 120C93.1371 120 120 93.1371 120 60C120 26.8629 93.1371 0 60 0C26.8629 0 0 26.8629 0 60ZM111 60C111 88.1665 88.1665 111 60 111C31.8335 111 9 88.1665 9 60C9 31.8335 31.8335 9 60 9C88.1665 9 111 31.8335 111 60Z" fill="#191A1E" fill-opacity="0.7"/>
                    <text x="50%"
                          y="50%"
                          text-anchor="middle"
                          font-style="normal"
                          font-family="Gilroy"
                          font-weight="700"
                          line-height="36"
                          font-size="30"
                          fill="white">
                        {{ characters[i].mainLVL }}
                    </text>
                    <text 
                          x="50%" 
                          y="65%"  
                          text-anchor="middle" 
                          font-style="normal"
                          font-family="Gilroy"
                          font-weight= "600"
                          line-height="21"
                          font-size="18" 
                          fill="rgba(255, 255, 255, 0.3)">
                          Уровень
                    </text>
                </svg>
            </div>


VUE JS:    var characterInfo = new Vue({
el: "#characterInfo",
data: {
    show: false,
    mainLVL: 0,

database: mainLVL: {
            type: DataTypes.INTEGER(11),
            defaultValue: 0,
            allowNull: false,

заполнятся должно красным цветом


Источник

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

Автор решения: Alexandr_TT

Анимация заполнения контура для существующего path невозможна т.к фигура имеет двойной контур
см. рисунок ниже:

введите сюда описание изображения

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

.

введите сюда описание изображения

Теперь необходимо сохранить файл в формате *.svg

  • Далее провести оптимизацию файла с помощью SVGOMG

Код:

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"  style="background:#1D1F25">
  <path d="M111 60A51 51 0 1 1 9 60a51 51 0 0 1 102 0z" style="stroke:#BE1018;stroke-width:8"/>
  </svg>

  • Для выполнения анимации заполнения контура необходимо узнать максимальную длину. Делается это с помощью метода JS: getTotalLength()

let path = document.querySelector(".shape");
let length = path.getTotalLength();
console.log(length);
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"  style="background:#1D1F25">
  <path class="shape" d="M111 60A51 51 0 1 1 9 60a51 51 0 0 1 102 0z" style="stroke:#BE1018;stroke-width:8"/>
  </svg>

Длина path: 320.48773193359375 ~ 320.5 px

Это значение будет использовано в анимации заполнения path

Код:

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"  style="background:#1D1F25">
    
  <path class="shape" stroke-dashoffset="320.5" stroke-dasharray="320.5" transform="rotate(-90 60 60)" d="M111 60A51 51 0 1 1 9 60a51 51 0 0 1 102 0z" style="stroke:#BE1018;stroke-width:8">
   <animate attributeName="stroke-dashoffset"  dur="7s" values="320.5;0"  repeatCount="indefinite" />
  </path> 
   <text x="50%" y="50%" stroke="white" text-anchor="middle" font-family="Gilroy" font-weight= "600" font-size="22"  >Уровень </text>
  
  </svg>

→ Ссылка
Автор решения: Alexandr_TT

нужно реализовать само заполнение в зависимости от уровня игрока и установив максимальный.

Длина всей окружности = 320px
Допустим у нас 8 уровней игры, тогда длина одного сектора (уровня)
равна 320 / 8 = 40

Для заполнения окружности в зависимости от уровня игрока воспользуемся

stroke-dasharray= dash gap, где
dash - длина черты gap - пробел

При stroke-dasharray= 40 320, будет заполнен первый сектор окружности, что соответствует первому уровню.

<svg xmlns="http://www.w3.org/2000/svg"  width="240" height="240" viewBox="0 0 120 120"  >
    
  <path class="trace" transform="rotate(-90 60 60)" fill="#1A1B20" stroke="grey" stroke-width="6" stroke-dashoffset="0" stroke-dasharray="320" 
    d="M111 60A51 51 0 1 1 9 60a51 51 0 0 1 102 0z" />

 <path class="level" transform="rotate(-90 60 60)" fill="#1A1B20" stroke-dashoffset="320"
    stroke-dasharray="40 280" stroke="#BE1018" stroke-width="6"
     d="M111 60A51 51 0 1 1 9 60a51 51 0 0 1 102 0z" />
    <text x="50%" y="50%" stroke="white" text-anchor="middle" font-family="Gilroy" font-weight= "600" font-size="18"  >Уровень 1 </text>
  
  </svg>

Level2
stroke-dasharray="80 240"

<svg xmlns="http://www.w3.org/2000/svg"  width="240" height="240" viewBox="0 0 120 120"  >
    
  <path class="trace" transform="rotate(-90 60 60)" fill="#1A1B20" stroke="grey" stroke-width="6" stroke-dashoffset="0" stroke-dasharray="320" 
    d="M111 60A51 51 0 1 1 9 60a51 51 0 0 1 102 0z" />

 <path class="level" transform="rotate(-90 60 60)" fill="#1A1B20" stroke-dashoffset="320"
    stroke-dasharray="80 240" stroke="#BE1018" stroke-width="6"
     d="M111 60A51 51 0 1 1 9 60a51 51 0 0 1 102 0z" />
   
 
   <text x="50%" y="50%" stroke="white" text-anchor="middle" font-family="Gilroy" font-weight= "600" font-size="18"  >Уровень 2 </text>
  
  </svg>

Level3
stroke-dasharray="120 200"

<svg xmlns="http://www.w3.org/2000/svg"  width="240" height="240" viewBox="0 0 120 120"  >
    
  <path class="trace" transform="rotate(-90 60 60)" fill="#1A1B20" stroke="grey" stroke-width="6" stroke-dashoffset="0" stroke-dasharray="320" 
    d="M111 60A51 51 0 1 1 9 60a51 51 0 0 1 102 0z" />

 <path class="level" transform="rotate(-90 60 60)" fill="#1A1B20" stroke-dashoffset="320"
    stroke-dasharray="120 200" stroke="#BE1018" stroke-width="6"
     d="M111 60A51 51 0 1 1 9 60a51 51 0 0 1 102 0z" />
   
 
   <text x="50%" y="50%" stroke="white" text-anchor="middle" font-family="Gilroy" font-weight= "600" font-size="18"  >Уровень 3 </text>
  
  </svg>

Level4
stroke-dasharray="160 160"

<svg xmlns="http://www.w3.org/2000/svg"  width="240" height="240" viewBox="0 0 120 120"  >
    
  <path class="trace" transform="rotate(-90 60 60)" fill="#1A1B20" stroke="grey" stroke-width="6" stroke-dashoffset="0" stroke-dasharray="320" 
    d="M111 60A51 51 0 1 1 9 60a51 51 0 0 1 102 0z" />
 <path class="level" transform="rotate(-90 60 60)" fill="#1A1B20" stroke-dashoffset="320"
    stroke-dasharray="160 160" stroke="#BE1018" stroke-width="6"
     d="M111 60A51 51 0 1 1 9 60a51 51 0 0 1 102 0z" />
   <text x="50%" y="50%" stroke="white" text-anchor="middle" font-family="Gilroy" font-weight= "600" font-size="18"  >Уровень 4 </text>
  
  </svg>

Level5
stroke-dasharray="200 120"

<svg xmlns="http://www.w3.org/2000/svg"  width="240" height="240" viewBox="0 0 120 120"  >
    
  <path class="trace" transform="rotate(-90 60 60)" fill="#1A1B20" stroke="grey" stroke-width="6" stroke-dashoffset="0" stroke-dasharray="320" 
    d="M111 60A51 51 0 1 1 9 60a51 51 0 0 1 102 0z" />
 <path class="level" transform="rotate(-90 60 60)" fill="#1A1B20" stroke-dashoffset="320"
    stroke-dasharray="200 120" stroke="#BE1018" stroke-width="6"
     d="M111 60A51 51 0 1 1 9 60a51 51 0 0 1 102 0z" />
 
   <text x="50%" y="50%" stroke="white" text-anchor="middle" font-family="Gilroy" font-weight= "600" font-size="18"  >Уровень 5 </text>
  
  </svg>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.