SVG 描边动画在 Safari 中不起作用
SVG stroke animation not working in Safari
我的JS代码遍历每条路径,并根据路径长度添加一个stroke-dasharray
和stroke-dashoffset
:
setTimeout(() => {
const $paths = document.getElementsByTagName('path');
for (const path of $paths) {
const totalLength = path.getTotalLength();
path.style.strokeDashoffset = totalLength;
path.style.strokeDasharray = totalLength;
}
}, 300);
然后,我的 CSS 只是将 dashoffset
动画化为 0
,同时降低描边不透明度并提高填充不透明度:
.character path {
fill-opacity: 0;
stroke-opacity: 1;
stroke-width: 2px;
stroke: white;
-webkit-animation: path 4s linear 1s both;
animation: path 4s linear 1s both;
}
@keyframes path {
70% {
fill-opacity: 0;
}
80% {
stroke-dashoffset: 0;
stroke-opacity: 1;
}
100% {
stroke-opacity: 0;
stroke-dashoffset: 0;
fill-opacity: 1;
}
}
这在 Chrome 中完美运行 - 动画显示正在绘制的路径,但在 Safari 中,路径只显示而没有任何动画。
我尝试添加前缀,但它不起作用。
编辑:这与我设置的超时有某种关系,我只是将它添加到问题的代码中。我必须添加该超时,因为 svg 是动态加载的。
这是一个显示问题的 Fiddle(在 Chrome 中有效,在 Safari 中无效),谢谢@kaiido。
我通过做两件事解决了这个问题:
- 把
animation
属性也放在JS里
- 我发现如果动画延迟大于超时,Safari 不会在
setTimeout
中处理动画。所以我把延迟降低到200ms。
更新的 JS:
setTimeout(() => {
const $paths = document.getElementsByTagName('path');
for (const path of $paths) {
const totalLength = path.getTotalLength();
path.style.strokeDashoffset = totalLength;
path.style.strokeDasharray = totalLength;
path.style.animation = 'path 4s linear 0.2s both';
};
}, 300);
我的JS代码遍历每条路径,并根据路径长度添加一个stroke-dasharray
和stroke-dashoffset
:
setTimeout(() => {
const $paths = document.getElementsByTagName('path');
for (const path of $paths) {
const totalLength = path.getTotalLength();
path.style.strokeDashoffset = totalLength;
path.style.strokeDasharray = totalLength;
}
}, 300);
然后,我的 CSS 只是将 dashoffset
动画化为 0
,同时降低描边不透明度并提高填充不透明度:
.character path {
fill-opacity: 0;
stroke-opacity: 1;
stroke-width: 2px;
stroke: white;
-webkit-animation: path 4s linear 1s both;
animation: path 4s linear 1s both;
}
@keyframes path {
70% {
fill-opacity: 0;
}
80% {
stroke-dashoffset: 0;
stroke-opacity: 1;
}
100% {
stroke-opacity: 0;
stroke-dashoffset: 0;
fill-opacity: 1;
}
}
这在 Chrome 中完美运行 - 动画显示正在绘制的路径,但在 Safari 中,路径只显示而没有任何动画。
我尝试添加前缀,但它不起作用。
编辑:这与我设置的超时有某种关系,我只是将它添加到问题的代码中。我必须添加该超时,因为 svg 是动态加载的。
这是一个显示问题的 Fiddle(在 Chrome 中有效,在 Safari 中无效),谢谢@kaiido。
我通过做两件事解决了这个问题:
- 把
animation
属性也放在JS里 - 我发现如果动画延迟大于超时,Safari 不会在
setTimeout
中处理动画。所以我把延迟降低到200ms。
更新的 JS:
setTimeout(() => {
const $paths = document.getElementsByTagName('path');
for (const path of $paths) {
const totalLength = path.getTotalLength();
path.style.strokeDashoffset = totalLength;
path.style.strokeDasharray = totalLength;
path.style.animation = 'path 4s linear 0.2s both';
};
}, 300);