javascript - 使具有圆边响应的 svg 路径

Question

我正在制作一个 svg 图形，它将代表游戏中的健康栏，到目前为止它看起来像这样 https://jsfiddle.net/8ds9hpuv

概念是根据 Angular 色的健康状况来减少/增加宽度的响应栏。

现在我不知道如何减小这条路径的宽度，但始终保持右侧的圆边。

理想情况下，我也想让它的高度响应

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

Answer 1

我通过将每个命令更改为小写来修改路径(使用此工具:Convert SVG path to all-relative or all-absolute)但我将最后一个 H 命令保留为大写，因为 H0 将返回 x="0"

接下来，我将第一个 h 命令替换为变量 healthIndicator

我假设箭头的尖端只有美学功能。

为了演示，我使用输入类型范围来更改 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" />