javascript - SVG stroke-dashoffset 不起作用

Question

我在使用 stroke-dasharray 和 stroke-dashoffset 使我的 SVG 路径设置动画时遇到了一些问题。路径长度用Js计算。下面我包含了一个 JsFiddle，它准确地显示了我要完成的任务。

我找了又找，遇到的很多例子都不适合我。在这一点上，我得出的结论是我遗漏了一些东西，但我无能为力地试图弄清楚那是什么。

<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;
  }
}

https://jsfiddle.net/maisonm/9c3baxh5/

Answer 1

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

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

path.pathOne {
  fill: none;
  stroke: black;
  stroke-width: 3;
  stroke-dasharray: 2566;
  stroke-dataoffset: 2566;
  animation: cloud 5s linear alternate infinite;
}
@keyframes cloud {
  from {
    stroke-dashoffset: 2566;
  }
  to {
    stroke-dashoffset: 0;
  }
}

  <svg x="0px" y="0px" width="250px" height="250px" 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>

请注意，两个子路径都是单独的虚线，因此给人的印象是有两个动画。但这并不是正在发生的事情，只是破折号和偏移量分别应用于每个子路径。

由于路径长度是为两个子路径的总和计算的，因此您会在动画重复之前看到时间滞后。

但也许您的目标是 this ？