Javascript 使svg路径具有圆边响应

我正在制作一个svg图形，它将在游戏中表示健康栏，到目前为止，它看起来是这样的

其概念是根据角色的健康状况，使响应条的宽度减少/增加

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

理想情况下，我希望它的高度响应以及

---

我通过将每个命令更改为小写（使用此工具：）修改了路径，但由于H0将返回到x=“0”，我将最后一个H命令保留为大写

接下来，我将第一个

h

命令替换为变量

healthdindicator

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

为了demp，我使用了一个输入类型范围来更改

healthIndicator

的值。我希望这就是你需要的

itr.addEventListener（“输入”，（）=>{
设healthIndicator=itr.value；
设d=`M0,0h${healthdindicator}c9.111,9.346,13.666,15.18,13.666,17.5c0,2.320218，-4.555405,8.153551，-13.666215,17.5H0v-35z`；
路径setAttributeNS（null，“d”，d）；
})

svg{border:1px solid}

@RobertLongson只需“裁剪”图形，其大小不会改变