“如何旋转孩子”；“骨头”；在狗身上'；SVG中的尾巴是什么？

我被SVG的方法和工具弄得不知所措，我想找到一种超级简单的方法来定位和绘制一条棍形狗的“尾巴”，它可能由五块“骨头”组成。目前，每一个都可以是直线或矩形。我希望每个子骨骼与其父骨骼具有可设置的旋转。你也可以把它想象成一条五段蛇

例如，如果骨骼的旋转为10,10,10,10,10，那么尾巴会平滑地向下弯曲，就像一个圆一样。如果旋转为-20，-10,0,10,20，则尾部具有“S”曲线形状。我希望有一个静态页面可以做到这一点，但理想情况下，我希望为五个骨骼中的每一个都提供某种文本框/滑块，或者至少提供一个如何通过JavaScript引用和调整骨骼的示例。有没有一个真正简单的方法可以制作这条尾巴？如果有一个库真的为这种情况增加了价值，我将使用它，但简单/小是首选。谢谢

是的，让每根骨头都成为前一根骨头的“孩子”

下面是一个SVG示例。使代码段全屏显示以查看输入

功能调整尾部（evt）
{
var name=evt.target.getAttribute（'name'）；
var val=evt.target.value；
console.log（“name=“+name+”val=“+val”）；
变量xform=（name=“s1”）？：“translate（50,0）”；
变换+=“旋转（“+val+”）；
document.getElementById（name）.setAttribute（“转换”，xform）；
返回false；
}
文件.getElementById（“i1”）.addEventListener（“更改”，调整尾）；
document.getElementById（“i2”）。addEventListener（“更改”，adjustTail）；
文件.getElementById（“i3”）.addEventListener（“更改”，调整尾）；
document.getElementById（“i4”）。addEventListener（“更改”，adjustTail）；
document.getElementById（“i5”）。addEventListener（“更改”，adjustTail）；

输入{
宽度：3em；
}

谢谢！这是一个完美的答案。简单、信息量大、功能齐全。非常感谢。您可以通过在

标记中添加

stroke linecap=“round”

来消除线段之间的间隙。