悬停上的SVG动画-第一步，如何？

我想在悬停某个元素时对其制作动画

由于我在这两种情况下（标准和悬停状态）都使用svg元素，我想我必须在悬停第一个svg元素时通过内联编辑svg代码来操纵它

我基本上需要一个起点： 我如何以动画方式“重画”悬停图像，而不仅仅是交换它？ 我是否需要第三方库（哪个）？ 如果我有多个这样的情况，我将如何通过在html源代码中不内联10个svg代码来保持代码干净

谢谢你的回答

svg图像的代码如下所示

.cls-1、.cls-2{填充：无；笔划：#000；}.cls-1{笔划斜接限制：10；笔划宽度：7px；}.cls-2{笔划线条连接：倒角；笔划宽度：5px；}
民主之箭1

您可以使用JavaScript来操纵

points

属性的值，但是这样的更改是突然的，因此更改看起来就像是一部定格电影

像这样，您可以给

路径
元素一个
笔划数组
，它等于
路径
的
获取总长度
，以便“擦除”页面上的直线（箭头），然后快速切换
d
属性的值，然后“重新绘制”这一行又回到页面上了吗

然而，我不相信这就是你想要的。我相信HTML5画布，以我有限的知识，将是更可行的选择，你正在努力实现

实际上，我想使用CSS3 3D变换是可能的。然而，问题是这条线没有任何深度，因此当您在CSS中的
路径上最初设置
rotateX（90度）
时，这条线将不可见，而不是显示为一条直线……
看看格林斯托克。。。但是，你真的想要一个巨大的图书馆，用于一个不能在触摸设备上工作的州吗？如何在悬停时交换取决于如何在页面上使用svg：内联svg、img、背景图像。只能使用css或通过js执行。
<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 800">
    <defs><style>.cls-1,.cls-2{fill:none;stroke:#000;}.cls-1{stroke-miterlimit:10;stroke-width:7px;}.cls-2{stroke-linejoin:bevel;stroke-width:5px;}</style></defs>
    <title>arrows_demoZeichenfläche 1</title>
    <line class="cls-1" x1="325.5" y1="333" x2="325.5" y2="539"/>
    <polyline class="cls-2" points="242 455.67 325.75 539.42 409.42 455.75"/><path class="cls-1" d="M670.5,135.79c0,11.62-8,11.73-8,23.35s8,11.68,8,23.3-8,11.65-8,23.28,8,11.64,8,23.26-8,11.63-8,23.25,8,11.63,8,23.25-8,11.63-8,23.25,8,11.63,8,23.25-8,11.62-8,23.25,8,11.62,8,23.25-8,11.63-8,23.25,8,11.63,8,23.25-8,11.62-8,23.25,8,11.62,8,23.25-8,11.63-8,23.25,8,11.63,8,23.25v31"/>
    <polyline class="cls-2" points="587 455.67 670.75 539.42 754.42 455.75"/></svg>