我想为 SVG 路径的属性“d”使用 CSS 动画。 这个例子在谷歌浏览器中工作:
body {
background-color: #022040;
}
#path {
d: path('M425,225 L475,275 L575,175 L675,275 L775,175 L875,275 L925,225');
stroke: #1EFE64;
fill: none;
animation-name: path;
animation-duration: 5s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
@keyframes path {
0% {
d: path('M425,225 L475,275');
}
25% {
d: path('M425,225 L475,275 L575,175 L575,175 L575,175 L575,175 L575,175');
}
50% {
d: path('M425,225 L475,275 L575,175 L675,275 L675,275 L675,275 L675,275');
}
75% {
d: path('M425,225 L475,275 L575,175 L675,275 L775,175 L775,175 L775,175');
}
90% {
d: path('M425,225 L475,275 L575,175 L675,275 L775,175 L875,275 L875,275');
}
100% {
d: path('M425,225 L475,275 L575,175 L675,275 L775,175 L875,275 L925,225');
}
}<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" height="400">
<path id="path" stroke-width="20"/>
</svg>但不适用于 Safari Pc/Mobile 和 FireFox。
如何修复错误？ 或者我应该在 svg 中使用标签“animate”？
请帮帮我) 谢谢!
最佳答案
d 是 SVG 2 规范中定义的 SVG“几何属性”，地址为 https://svgwg.org/svg2-draft/paths.html#TheDProperty . Google Chrome 的 Blink 布局引擎是唯一支持此属性的布局引擎，其实现与当前规范定义不匹配。
相关问题跟踪页面:
而且，是的，您可以使用 SVG animate 元素实现相同的效果:
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1000 1000">
<title>Path Animation</title>
<path fill="none" stroke="hsl(139, 99%, 56%)" stroke-width="20">
<animate attributeName="d" values="
M 425 225 L 475 275;
M 425 225 L 475 275 L 575 175 L 575 175 L 575 175 L 575 175 L 575 175;
M 425 225 L 475 275 L 575 175 L 675 275 L 675 275 L 675 275 L 675 275;
M 425 225 L 475 275 L 575 175 L 675 275 L 775 175 L 775 175 L 775 175;
M 425 225 L 475 275 L 575 175 L 675 275 L 775 175 L 875 275 L 875 275;
M 425 225 L 475 275 L 575 175 L 675 275 L 775 175 L 875 275 L 925 225
" keyTimes="0; 0.25; 0.5; 0.75; 0.9; 1" calcMode="spline" keySplines="0.42 0 1 1; 0.42 0 1 1; 0.42 0 1 1; 0.42 0 1 1; 0.42 0 1 1" dur="5s" fill="freeze"/>
</path>
</svg>
0.42 0 1 1 是 ease-in animation-timing-function 属性关键字的一组三次贝塞尔值，定义在CSS Timing Functions, Level 1 规范:https://drafts.csswg.org/css-timing-1/#valdef-cubic-bezier-timing-function-ease-in .
关于CSS "d"路径 - 属性在 Safari、FireFox 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46454102/