Question

我有一个SVG路径，我试图动画到＆＃34;绘制＆＃34;本身，使用stroke-dasharray / stroke-dashoffset组合技巧（有关详细信息，请参阅this article）。但是，尽管（据我所知）所有内容都正确实现，但这个技巧并不适用于这条路径。所以，我的问题是，我在这里做错了什么？

这是有问题的路径：

<path class="cls-1" d="M13.36,28.18c-8.06,5.19-9.74,17-4,24.91a31.38,31.38,0,0,0,3.19-4.71L34.92,9.74C38.67,3.19,44.1,0,48.65,0,65.17,0,63.9,21,47.13,26.66c16,10.62,4.47,40.4-20.36,40.4C-2.29,67.06-7.39,35.05,10,24ZM35,27.94l-2.24-.24-14,24.19a42.77,42.77,0,0,1-4.15,5.91,23.84,23.84,0,0,0,12,2.87C46.73,60.67,54.48,32,35,27.94Zm.56-5.11c8.46-.16,13.17-2,16.36-8,4.15-7.82-3.59-14-9.66-3.51Z"></path>

CSS（例如简化）我使用：

path {
  stroke-dasharray: 415.9850769042969;
  stroke-dashoffset: 415.9850769042969;
  animation: letterB 5s linear infinite;
}

@keyframes letterB {
    to {
        stroke-dashoffset: 0;
    }
}

我试过了：

调整dashoffset / dasharray
在其他浏览器中测试（Safari 11.0.3，Firefox 57.0.4）

不确定该怎么做，或者说是什么，所以对于这个动画为什么不起作用的任何指导都将非常感激。

另外，我创建了一个简化案例on JSFiddle。

主要环境： Chrome v64.0.3282.140

Answer 1

您需要将fill:none设置为svg至aniamtion ...还有stroke和stroke-width ...

...实际上，这个想法就是为stroke

制作动画

Stack Snippet

＆＃13;

svg {
  padding: 20px;
}

path {
  stroke-dasharray: 415.9850769042969;
  stroke-dashoffset: 415.9850769042969;
  animation: letterB 5s linear forwards infinite;
  -webkit-animation: letterB 5s linear forwards infinite;
}

@keyframes letterB {
  0% {
    stroke-dashoffset: 415.9850769042969;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes letterB {
  0% {
    stroke-dashoffset: 415.9850769042969;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 302.67 67.06">
  <path class="cls-1" d="M13.36,28.18c-8.06,5.19-9.74,17-4,24.91a31.38,31.38,0,0,0,3.19-4.71L34.92,9.74C38.67,3.19,44.1,0,48.65,0,65.17,0,63.9,21,47.13,26.66c16,10.62,4.47,40.4-20.36,40.4C-2.29,67.06-7.39,35.05,10,24ZM35,27.94l-2.24-.24-14,24.19a42.77,42.77,0,0,1-4.15,5.91,23.84,23.84,0,0,0,12,2.87C46.73,60.67,54.48,32,35,27.94Zm.56-5.11c8.46-.16,13.17-2,16.36-8,4.15-7.82-3.59-14-9.66-3.51Z"
  fill="none" stroke-width="2" stroke="#000000"></path>
</svg>

＆＃13;

特定路径不使用Dashoffset作为预期动画

1 个答案: