Javascript SVG笔划偏移不工作

我在使用

stroke-dasharray

结合

stroke-dashoffset

来设置SVG的路径动画时遇到了一些问题。用Js计算路径长度。下面我包含了一个JSFIDLE，它确切地显示了我要完成的任务

我搜索了又搜索，我遇到的很多例子对我都不起作用。在这一点上，我的结论是，我错过了一些东西，但我绞尽脑汁试图弄清楚那是什么

<div>
  <svg x="0px" y="0px" width="312px" height="312px" viewBox="0 0 512 512">
    <g>
      <path class="pathOne" d="M320,128c52.562,0,95.375,42.438,96,94.813c-0.25,1.938-0.438,3.875-0.5,5.875l-0.812,23.5l22.25,7.75   C462.688,268.906,480,293.062,480,320c0,35.312-28.688,64-64,64H96c-35.281,0-64-28.688-64-64c0-34.938,28.188-63.438,63-64   c1.5,0.219,3.063,0.406,4.625,0.5l24.313,1.594l8-22.969C140.938,209.313,165.063,192,192,192c3.125,0,6.563,0.375,11.188,1.188   l22.406,4.031l11.156-19.844C253.875,146.938,285.75,128,320,128 M320,96c-47.938,0-89.219,26.688-111.156,65.688   C203.375,160.719,197.781,160,192,160c-41.938,0-77.219,27.063-90.281,64.563C99.813,224.438,97.969,224,96,224c-53,0-96,43-96,96   s43,96,96,96h320c53,0,96-43,96-96c0-41.938-27.062-77.25-64.562-90.313C447.5,227.75,448,225.938,448,224   C448,153.313,390.688,96,320,96L320,96z" fill="#333333"/>
    </g>
  </svg>
</div>

svg {
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}
path.pathOne {
  stroke-dasharray: 2566;
  stroke-dataoffset: 2566;
  animation: cloud 5s linear alternate infinite;
}
@keyframes cloud {
  from {
    stroke-dashoffset: 2566;
  }
  to {
    stroke-dashoffset: 0;
  }
}

svg{
位置：固定；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
帕蒙之路{
行程：2566；
行程数据偏移量：2566；
动画：云5s线性交替无限；
}
@关键帧云{
从{
行程偏移：2566；
}
到{
笔划偏移：0；
}
}

---

图形不显示路径的笔划，而是显示没有笔划的填充路径。以下是您可以在svg编辑器Inkscape中看到的路径数据的图示：

这是可以设置动画的路径。那是你想要的吗？在这种情况下，定义笔划并删除填充：

path.pathOne{
填充：无；
笔画：黑色；
笔画宽度：3；
行程：2566；
行程数据偏移量：2566；
动画：云5s线性交替无限；
}
@关键帧云{
从{
行程偏移：2566；
}
到{
笔划偏移：0；
}
}

手写解决方案 如果SVG形状具有双路径，且路径与方向变化点处的形状之间的距离不同，则最好使用手写技术为绘制路径设置动画。
其本质是为中间线设置动画，中间线的宽度足以覆盖原始形状的最宽部分

此中间线必须在矢量编辑器中绘制并另存为路径

接下来，通过从最大值到零绘制一条线来设置此路径的动画。将此元素添加到遮罩，并将遮罩应用于云轮廓的原始形状

<animate attributeName="stroke-dasharray"
  begin="svg1.click" dur="4s" values="1281,0;0,1281" fill="freeze" />

---

谢谢你花时间解释。工作完美，现在我完全明白它是如何工作的。