Javascript 控制SVG动画的起点

我有一个从左上角开始的

的SVG动画

动画如何从左下角开始

svg{
宽度：50%；
身高：50%；
}
直肠{
填充：透明；
行程：1c7fbf；
动画：5s直线向前绘制；
}
@关键帧绘制{
0% {
笔划阵列：260；
行程偏移：-260；
笔画宽度：2px；
}
100% {
笔划阵列：260；
笔划偏移：0；
笔画宽度：2px；
}
}

---

翻转和重新定位

工作：

transform:scaleY（-1）translateY（-100%）

还需要反转css动画：

  0% {
    stroke-dasharray: 260 260;
    stroke-dashoffset: 260; // instead of -260
    stroke-width: 2px;
  }


svg{
宽度：50%；
身高：50%；
}
直肠{
填充：透明；
行程：1c7fbf；
动画：5s直线向前绘制；
转换：scaleY（-1）translateY（-100%）；
}
@关键帧绘制{
0% {
笔划阵列：260；
行程偏移：260；
笔画宽度：2px；
}
100% {
笔划阵列：260；
笔划偏移：0；
笔画宽度：2px；
}
}

我不认为有什么方法可以改变起点，从那里画出一个
-元素

但是，如果您自己使用
和创建矩形，并通过反转
笔划dashoffset
的起始值，可以从左下角或任何其他您喜欢的角落开始：


路径{
填充：透明；
笔画：蓝色；
笔画宽度：2；
笔划阵列：260；
动画：5s直线向前绘制；
}
@关键帧绘制{
0% {
行程偏移：260；
}
100% {
笔划偏移：0；
}
}