我可以对 SVG <path> 使用 animate() 吗？

Question

尝试使用 vanilaanimate()函数对 SVG <path>元素进行动画处理

小路：

<path id="path1" fill="black" d="M30,30l 50,10 0,50"></path>

杰斯：

path1.animate([
    { d: `M30,30 l10,10 50,0` },
    { d: `M30,30 l60,10 50,20` },
    { d: `M30,30 l10,10 50,0` },
 ], {
    duration: 1000
})

收到警告但没有任何作用：

属性 d 的关键帧值无效：M30,30 l10,10 50,0 属性 d 的关键帧值无效：M30,30 l60,10 50,20 属性 d 的关键帧值无效：M30,30 l10,10 50,0

Answer 1

Node.jsanimate()正在使用Web 动画 API。
因此，您需要将 d 坐标包装在path()类似于 css 路径动画的函数中。

path.animate([
    { d: "path('M40 40 l10 10 50 0')" },
 ], {
    duration: 1000,
})

path.animate([
    { d: "path('M40 40 l10 10 50 0')" },
 ], {
    duration: 1000,
})

let path0 = document.getElementById("path0");

path0.animate([
   // { d: "path('M30,30l 50,10 0,50')" },
    { d: "path('M40 40 l10 10 50 0')" },
    { d: "path('M50,50 l60,10 50,20')"},
    { d: "path('M30,60 l10,20 50,0')" },
 ], {
    duration: 1000,
    iterations: Infinity
})

svg {
  width: 200px;
  display: inline-block;
  border: 1px solid red;
}

.pathAni {
  transition: 0.3s;
}

.pathAniCss {
  animation: dAni 3s forwards infinite;
}

@keyframes dAni {
  33% {
    d: path("M40 40 l10 10 50 0");
  }
  66% {
    d: path("M50,50 l60,10 50,20");
  }
  100% {
    d: path("M30,60 l10,20 50,0");
  }
}

来自 W3C 文档：网页动画；W3C 工作草案，2021 年 5 月 18 日

Web 动画模型旨在提供表达 CSS 过渡 [CSS-TRANSITIONS-1]、CSS 动画 [CSS-ANIMATIONS-1] 和 SVG [SVG11] 所需的功能。因此，Web 动画模型的用例是这三个规范的用例的并集。

检查浏览器对path()
Firefox caniuse report 2022 的支持：

仅支持 Clip-path 和 offset-path 属性。

测试浏览器支持的一些示例：Animate SVG Path Changes in CSS