尝试在javascript中变形SVG

我试图用一些卡片做一个布局，当点击时，这些卡片会打开以显示更多信息。我设法让大部分的东西工作，但我不能让左边的小横幅变形为它的开放状态。据我所见，最好的方法是使用anime.js，但由于某些原因，它不起作用。代码如下：

let cardtokle=document.querySelectorAll（'.cardtokle'）；
对于（i=0；i}

您不需要为此使用外部库。事实上，您需要的动画非常简单，因为d属性将从：

M0,0H47V156L23.5，134.86L0156V0Z

致：

M0,0H47V156L23.5，177.14L0156V0Z

这里唯一改变的是一个点的y值。为了获得路径变形，需要设置y坐标从134.86到177.14的动画。可以说y坐标的实际值为134.86，

目标值为177.14


let rid=null；
//点的y坐标值在134.86和177.14之间变化
让内存=[134.86177.14]；
让目标=内存[0]；
让值=内存[1]；
//更新该值的函数
函数updateValue（）{
设dist=目标值；
设vel=dist/10；
值+=vel；
//当目标和值之间的距离非常小时停止动画
如果（数学绝对值（距离）<.01）{
if（rid）{window.cancelAnimationFrame（rid）；
rid=null；
}
}  
}
函数updatePath（）{
setAttributeNS（null，“d”，`M0,0H47V156L23.5，${value}l0156v0z`）；
}
函数框架（）{
rid=window.requestAnimationFrame（帧）；
updateValue（）；
updatePath（）；
}
window.addEventListener(
“加载”，
更新路径，
假的
);
addEventListener（//在mousedown上设置路径动画
“鼠标镇”，
函数（）{
如果（rid）{
window.cancelAnimationFrame（rid）；
rid=null；
}
memory.reverse（）；
目标=内存[1]；
框架（）；
},
假的
);
svg{width:50px；}
好的，在多次尝试失败后，我决定尝试更简单的方法：使用CSS。基本上，我没有使用svg，而是使用了两个div，一个是矩形，一个是三角形

也就是说，这可能不是理想的解决方案，我可能会实施enxaneta的解决方案


let spellBanner=document.querySelector（“.card banner”）；
让spellBannerTip=document.querySelector（“.card banner tip”）；
spellBanner.addEventListener（“单击”，函数（）{
spellBanner.style.height=“135px”；
spellBannerTip.style.top=“133px”；
spellBannerTip.style.borderBottom=“10px纯白”；
spellBannerTip.style.borderTop=“0”；
});
.card横幅{
位置：绝对位置；
背景色：黑色；
宽度：47px；
高度：75px；
过渡：所有0.2秒缓进缓出；
}
.卡片横幅提示{
位置：绝对位置；
top:83px；
宽度：0；
身高：0；
左边框：23.5px实心透明；
右边框：23.5px实心透明；
边框顶部：10px实心rgb（0,0,0）；
过渡：所有0.2秒缓进缓出；
}

请原谅我的无知，但我不知道这些值是从哪里来的。我的“A”路径是“M0 0H47V75.8L23.5 85 0 75.8V0Z”，我的“B”路径是“M0 0h47v156l-23.5-32L0 156V0z”，并且有不止一个不同的点，所以我不知道如何将此代码适应我的svg。是的，我真的很愚蠢哈哈。我正在写我是如何用CSS而不是javascript解决这个问题的，在修改我的文章时，我看到了“RunCodeSnippet”按钮，我以前没有注意到这个按钮。你的回答现在更有意义了，谢谢！