stroke-dashoffset 对我不起作用

Question

在使用动画 svg 时，我发现了一个奇怪的问题，即 stroke-dashoffset 对我不起作用。我想勾选自己画自己

我创建了一支笔，您可以在这里观看： https://codepen.io/kalreg/pen/yorQaV

<svg>
  <path stroke="red" fill="none" stroke-width=10 stroke-dashoffset=6530  d="M5,50 L60,105 L150,5"></path>
</svg>

将 css 或路径属性从负值、通过 0 更改为正值都不会改变复选标记的外观

我不确定我做错了什么，所以任何建议都将不胜感激。谢谢。

Answer 1

stroke-dashoffset 的动画与 stroke-dasharray 一起工作，您还缺少 @keyframes 以实际拥有动画：

path {
  stroke-dasharray: 6630;
  stroke-dashoffset: 6630;
  animation: dash 5s linear forwards;
}

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

这是对您的代码笔的更新：
https://codepen.io/anon/pen/mMgQMY

stroke-dashoffset 对我不起作用

stroke-dashoffset doesnt work for me

css

svg

stroke