svg stroke-dashoffset 属性疑问

Question

<style>
    #path {
        animation: offset 6s linear 1 both;
        stroke-dasharray: 20px,10px;
    stroke-dashoffset: 0px;

    }
    @keyframes offset {
        0%{
      stroke-dashoffset: 100px;
      }
      100%{
          stroke-dashoffset: 0;
      }
    }
</style>
<svg width="800" height="600">
    <defs>
        <marker id="Triangle" viewBox="0 0 10 10" refX="1" refY="5" markerWidth="10" markerHeight="10" orient="auto">
            <path d="M 0 0 L 10 5 L 0 10 z" />
        </marker>
    </defs>
    <path id="path" fill="none" stroke="red" stroke-dashoffset="0px" stroke-width="1px" d="M452,293c0,0,0-61,72-44c0,0-47,117,81,57
    s5-110,10-67s-51,77.979-50,33.989" marker-mid="url(#Triangle)" marker-end="url(#Triangle)" >
   </path>
</svg>

stroke-dashoffset：属性指定了dash模式到路径开始的距离。
为什么stroke-dashoffset 由100px 过渡到 0px，虚线的运动为什么不是应该由右到左而 是由左向右呢？ 因为我的理解是：该属性指定了 虚线的距离 路径起始点的偏移量。

Answer 1

这个属性确实是相对于起始点的偏移，但是，重点来了，相对的对象并不是原始位置的起点，而是dash array！因此，正数偏移x值相当于以dash array往右数的x位置的图形开始绘图，视觉效果像把dash array相对起点位置往左拉(dash array循环自身)，负数偏移x相当于以dash array往左数的x位置开始绘图，视觉效果就向右了。
这就是为什么你从100到0视觉上是个往右运动的过程。

Answer 2

根据stroke-dashoffset的定义：the stroke-dashoffset attribute specifies the distance into the dash pattern to start the dash. 我的理解是在这条虚线内从什么位置开始画线，也就是说如果stash-dashoffset为100px，则从原虚线的100px处开始画线，此时stash-dashoffset变小的过程在视觉上就是虚线由左向右运动。此为我的理解，欢迎讨论指正。

Answer 3

首先明确，stroke-dasharray是以实线开始的，其次，stroke-dashoffset 虚线偏移的位置，路径方向为负值，路径反向为正值。
在纸上画一下会比较明了。