在过去的六个月里，我一直在后端工作，而我在前端做图形操作已经有好几年了，所以我在这个问题上寻求指导，因为我甚至不知道该朝哪个方向走。 我在谷歌上搜索了一个小时，但我发现没有一个东西是我要找的--我突然意识到，我甚至不确定我到底要找什么。
我们的客户希望有一个页面，其中一个简单的长方形图像是由三个滑块修改的，每个滑块代表长度，宽度和‘弯曲’，（见附件图片）。
我不知道如何做到这一点--我的脑子里说的是“SVG”，尽管我过去没有使用过SVG。 我可以使用CSS修改现有的SVG图像吗？ Greensock的morphsvgplugin(https://Greensock.com/docs/v2/plugins/morphsvgplugin)是我最好的选择吗？ 我过去曾与绿袜合作过，但如果这对我想要做的事来说有些过分的话，我现在就不这么做了。
谢谢你提供的线索！
我没有对行使用L命令，而是对二次Bézier使用Q命令。
请阅读代码中的注释。
null
let angle = 2.5;// line's angle
let R,//line's length/2
r;//line's curvature. In the begining r=0 (no curvature)
R = ~~strokeLength.value/2;
r = ~~itr.value;
thePath.style.strokeWidth = strokeWidth.value
thePath.setAttribute("d",getD(R,r));
//set the stroke's width
strokeWidth.addEventListener("input",()=>{
thePath.style.strokeWidth = strokeWidth.value
})
//set the stroke's length
strokeLength.addEventListener("input",()=>{
R = ~~strokeLength.value/2;
thePath.setAttribute("d",getD(R,r))
})
//set the stroke's curvature
itr.addEventListener("input",()=>{
r = ~~itr.value;
thePath.setAttribute("d",getD(R,r))
})
//a function to calculate the new d attribute
function getD(R,r){
let p1 = {//move to this point
x:R*Math.cos(angle),
y:R*Math.sin(angle)
}
let p2 = {//end the curve in this point
x:R*Math.cos(angle + Math.PI),
y:R*Math.sin(angle + Math.PI)
}
let pc = {//calculate the control point for the bézier
x:r*Math.cos(angle + Math.PI/2),
y:r*Math.sin(angle + Math.PI/2)
}
let d = `M${p1.x},${p1.y}Q${pc.x},${pc.y} ${p2.x},${p2.y}`;
return d;
}svg{border:solid; float:left; margin:10px}
span{display:inline-block; width:130px;}<svg viewBox="-100 -100 200 200" width="200">
<path id="thePath" d="M-80,80L80,-80" stroke="skyBlue" stroke-width="10" stroke-linecap="round" fill="none" />
</svg>
<p><span>stroke's width</span><input id="strokeWidth" type="range" min="1" max="30" value="10"/></p>
<p><span>stroke's length</span><input id="strokeLength" type="range" min="0" max="200" value="50"/></p>
<p><span>stroke's curvature</span><input id="itr" type="range" min="-200" max="200" value="0"/></p>