Создание прогресс - графика SVG

107

23 июня 2021, 18:40

Я работаю над прогресс - графиком SVG, который будет отображать индикатор здоровья в игре, пока он выглядит так: jsfiddle

Идея состоит в том, чтобы иметь отзывчивую полосу, которая уменьшается / увеличивается в длину в зависимости от здоровья персонажа.

Прямо сейчас я не могу понять, как уменьшить этот путь по длине, при постоянном сохранении скругленного края на правой стороне.

В идеале я хотел бы, чтобы его высота также реагировала на рост здоровья персонажа.

<svg width="428" height="35"> 
 
<path d="M0 0h414.333785C423.444595 9.346449 428 15.179782 428 17.5c0 2.320218-4.555405 8.153551-13.666215 17.5H0V0z" fill="red"/> 
 
</svg>

Свободный перевод вопроса Making svg path with rounded edge responsive от участника @Ilja.

Answer 1

Я изменил путь, изменив каждую команду на строчные (используя этот инструмент: Convert SVG path to all-relative or all-absolute, но я оставил последнюю команду H в верхнем регистре, так как H0 возвращается к x = "0"

Затем я заменяю первую команду h на переменную healthIndicator

Я предполагаю, что наконечник стрелки имеет только эстетическую функцию.

itr.addEventListener("input",()=>{ 
  let healthIndicator = itr.value; 
  let d = `M0,0 h${healthIndicator}c9.111,9.346,13.666,15.18,13.666,17.5c0,2.320218,-4.555405,8.153551,-13.666215,17.5H0v-35z`; 
  thePath.setAttributeNS(null,"d", d); 
   
})

svg{border:1px solid}

<svg viewBox="0 0 550 35" > 
 
<path id="thePath" d="M0,0 
                      h414 
                      c9.111,9.346,13.666,15.18,13.666,17.5 
                      c0,2.320218,-4.555405,8.153551,-13.666215,17.5 
                      H0z" fill="red"/> 
 
</svg> 
 
<input type="range" id="itr" value="414" min="0" max="500" />

Свободный перевод ответа Making svg path with rounded edge responsive от участника @enxaneta.