在使用动画制作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到正值都不会更改复选标记的外观
我不确定我做错了什么,所以任何建议都不仅仅是值得赞赏的。 谢谢。
答案 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