我有两个SVG，我已经完全确保它们有完全相同数量的点，虽然贝塞尔曲线不相同，但有相同数量的句柄等。为什么它们不变形？我花了两天时间试图复制多个教程，让它发挥作用，我所能做的就是在没有任何变形的情况下切换它们，我在这里查看了其他答案，它们似乎只是说"；积分加不起来"；，我已经检查了又检查，每条曲线都有一条匹配的曲线，如果这些点加起来不起来，你能告诉我为什么不加起来吗？这是一个简单的修复，还是我应该放弃并使用一些变形api？如果是，是哪一个？
代码笔在此
let infoVisible = false;
const iTransition = document.getElementById("transitionToI");
const xTransition = document.getElementById("transitionToX");
document.getElementById("info").addEventListener("click", () => {
infoVisible ? iTransition.beginElement() : xTransition.beginElement();
infoVisible = !infoVisible;
})body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
button {
background: none;
border: none;
color: white;
cursor: pointer;
fill: black ;
font-family: 'EB Garamond', garamond, serif;
font-size: 50px;
font-style: italic;
font-weight: 600;
transition: filter 1s;
width: 100px;
z-index: 5;
}<button class="info display-none" id="info" type="button">
<svg class="i_x" xmlns="http://www.w3.org/2000/svg" viewBox="5 8 50.94 40.88">
<path d="M16.27,47.59a4.63,4.63,0,0,1-2.4-1,2.89,2.89,0,0,1-1.3-2.32c0-1.21,1.18-4,2.62-7.14.93-2,2-4.23,2.88-6.29a43.07,43.07,0,0,0,2.32-6.06c.14-.37.05-.56-.28-.56a3.79,3.79,0,0,0-1.33.35,15.82,15.82,0,0,0-1.74.88c-.61.34-1.19.71-1.75,1.08s-.83.34-1.08.17a.79.79,0,0,1-.38-.73,2.61,2.61,0,0,1,.8-1.33,19.63,19.63,0,0,1,2.09-2c.86-.72,1.83-1.45,2.9-2.2s2.14-1.43,3.21-2.06a24.17,24.17,0,0,1,2.94-1.5,2.11,2.11,0,0,1,1.81.14,4.19,4.19,0,0,1,1.47,1.29,1.45,1.45,0,0,1,.28,1.43c-.19.44-.67,1.58-1.62,3.86l-2.16,5.21c-.78,1.9-1.58,3.86-2.29,5.64A54.4,54.4,0,0,0,21,40.81a.63.63,0,0,0,.7.63,2.54,2.54,0,0,0,.74-.12,10.64,10.64,0,0,0,3.35-2.06,37.72,37.72,0,0,0,3.13-3c.09-.09.24-.27.39-.27a.64.64,0,0,1,.49.24.79.79,0,0,1,.21.52,5.27,5.27,0,0,1-1.43,3,24.8,24.8,0,0,1-3.6,3.56,26.24,26.24,0,0,1-4.51,3A9.24,9.24,0,0,1,16.27,47.59Z">
<animate id="transitionToX" begin="indefinite" fill="freeze" attributeName="d" dur="10s" values="M10.81,42.17A3.12,3.12,0,0,1,7.71,39c0-2.14,2.05-4.69,3.44-4.69.55,0,1,.61,1.33,1.19a1.86,1.86,0,0,0,1.8,1.23,3.81,3.81,0,0,0,2.64-1.37c.59-.65,3.1-3.5,3.74-4.24s1.54-1.81,1.85-2.19a1.74,1.74,0,0,0,.31-1.76c-.26-.95-2.66-9.25-2.8-9.67-.4-1.17-1.14-1.32-2.74,0a18.58,18.58,0,0,0-2.75,3c-.44.58-1.4.67-1.4-.54,0-3.27,4.66-9.1,9.06-9.1,2,0,2.76,1,4,4.4.23.64,1.75,6.18,1.92,6.84s.49.7.95.07,3.93-5.61,4.49-6.34c1.38-1.8,3.73-4.88,7-5a4.35,4.35,0,0,1,4.14,3.64,6.29,6.29,0,0,1-1.93,3.7c-1.43,1.25-2.58.74-3.24-.77-.89-2-3.13-.72-4.41.42a34.1,34.1,0,0,0-5.25,6.7,2.79,2.79,0,0,0-.37,2.67c.21.76,1.89,7,2.13,7.73s.54,1.88,1.59,1.88c1.26,0,3.11-2.5,4.28-4.59.6-1.06,1.56-1,1.56.5,0,2.38-3.83,9.58-8.77,9.58-2.57,0-4.08-1.92-4.84-4.66-.26-.94-1.18-5.51-1.42-6.35s-.41-1-1-.35c-1.35,1.55-3.75,5.55-6,8.12C15.37,40.69,13.41,42.17,10.81,42.17Z"></animate>
<animate id="transitionToI" begin="indefinite" fill="freeze" attributeName="d" dur="10s" values="M16.27,47.59a4.63,4.63,0,0,1-2.4-1,2.89,2.89,0,0,1-1.3-2.32c0-1.21,1.18-4,2.62-7.14.93-2,2-4.23,2.88-6.29a43.07,43.07,0,0,0,2.32-6.06c.14-.37.05-.56-.28-.56a3.79,3.79,0,0,0-1.33.35,15.82,15.82,0,0,0-1.74.88c-.61.34-1.19.71-1.75,1.08s-.83.34-1.08.17a.79.79,0,0,1-.38-.73,2.61,2.61,0,0,1,.8-1.33,19.63,19.63,0,0,1,2.09-2c.86-.72,1.83-1.45,2.9-2.2s2.14-1.43,3.21-2.06a24.17,24.17,0,0,1,2.94-1.5,2.11,2.11,0,0,1,1.81.14,4.19,4.19,0,0,1,1.47,1.29,1.45,1.45,0,0,1,.28,1.43c-.19.44-.67,1.58-1.62,3.86l-2.16,5.21c-.78,1.9-1.58,3.86-2.29,5.64A54.4,54.4,0,0,0,21,40.81a.63.63,0,0,0,.7.63,2.54,2.54,0,0,0,.74-.12,10.64,10.64,0,0,0,3.35-2.06,37.72,37.72,0,0,0,3.13-3c.09-.09.24-.27.39-.27a.64.64,0,0,1,.49.24.79.79,0,0,1,.21.52,5.27,5.27,0,0,1-1.43,3,24.8,24.8,0,0,1-3.6,3.56,26.24,26.24,0,0,1-4.51,3A9.24,9.24,0,0,1,16.27,47.59Z"></animate>
</path>
</svg>
</button>正如@ccprog已经说过的，每个<animate values="">属性至少需要两个值。开始状态和结束状态。但你们两个都只有一个价值。
第二。。。
我已经完全确保他们有完全相同的点数
不幸的是，这还不够。它们必须具有相同数量的路径命令，并且这些命令也必须是等效的。你的不符合那个标准。它们可能在编辑器软件中具有相同数量的点。但是输出路径定义没有。
在这里，他们排成一排。
M M
a a
a a
c c
s c
a a
c c
c a
a a
c c
c s
c a
c a
s a
s c
c s
a a
a a
c a
c a
a c
a l
c c
s A
c a
c a
c a
c a
c c
s a
c a
C a
Z a
a
A
Z
在动画开始工作之前，您需要解决这两个问题。