特定路径未按预期使用 Dashoffset 进行动画处理
Specific Path Not Animating Using Dashoffset as Expected
我有一个 SVG 路径,我正在尝试使用 stroke-dasharray
/stroke-dashoffset
组合技巧将其动画化为 "draw" 本身(有关详细信息,请参阅 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
您需要将 fill:none
设置为 svg
才能发生动画...还有 stroke
和 stroke-width
...
...实际上,这里的想法是让您的 stroke
动起来
堆栈片段
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;
}
}
<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>
我有一个 SVG 路径,我正在尝试使用 stroke-dasharray
/stroke-dashoffset
组合技巧将其动画化为 "draw" 本身(有关详细信息,请参阅 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
您需要将 fill:none
设置为 svg
才能发生动画...还有 stroke
和 stroke-width
...
...实际上,这里的想法是让您的 stroke
堆栈片段
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;
}
}
<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>