stroke-dashoffset对我不起作用

时间:2017-09-05 23:04:27

标签: css svg stroke

在使用动画制作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到正值都不会更改复选标记的外观

我不确定我做错了什么,所以任何建议都不仅仅是值得赞赏的。 谢谢。

1 个答案:

答案 0 :(得分:2)

stroke-dashoffset的动画与stroke-dasharray一起使用,您也错过@keyframes实际拥有动画:

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

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

以下是您的codepen的更新:
https://codepen.io/anon/pen/mMgQMY