CODEWITHSUNDEEP
javascriptsvg
Ilja
Ilja

Reputation: 46509

Making svg path with rounded edge responsive

I am working on a svg graphic that will represent health bar in a game, thus far it is looking like this https://jsfiddle.net/8ds9hpuv

Concept is to have responsive bar that decreases / increases in width based on character health.

Right now I can't figure out how to decrease this path in width, but maintain that rounded edge on the right side all the time.

Ideally I would like to make it's height responsive as well

<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>

Upvotes: 3

Views: 290

Answers (1)

enxaneta
enxaneta

Reputation: 33054

I've modified the path by changing every command to lowercase (using this tool: Convert SVG path to all-relative or all-absolute ) but I've left the last H command to uppercase since H0 is going back to x="0"

Next I'm replacing the first h command with the variable healthIndicator

I'm assuming that the tip of the arrow has only an aesthetical function.

For the sake of the demp I'm using an input type range to change the value of the healthIndicator. I hope this is what you need.

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" />

Upvotes: 4

Related Questions