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

Question

我想在悬停它时对元素进行动画处理。

因为我在两种情况下都使用svg-elements（标准状态和悬停状态），我想我必须以某种方式操纵第一个svg-element，然后通过编辑内联的svg代码来悬停它。

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

感谢您的回答！

svg-image的代码在这里

<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>

Answer 1

您可以使用JavaScript来操纵points属性的值，但这样的更改会是突然的，因此更改看起来就像是一个定格动画片。

与 Codepen 一样，您可以做的是path元素stroke-dasharray等于getTotalLength的{​​{1}} {1}}为了“擦除”页面的直线（箭头），然后快速切换path属性的值，然后将该行“重新绘制”回页面？

但是，我不相信这就是你要找的东西。我相信HTML5 Canvas，我对它的了解有限，对你想要完成的事情来说是更可行的选择。

实际上，我猜可能会使用CSS3 3D变换like so。然而，问题是该行没有任何深度，因此当您最初在CSS中的d上设置rotateX(90deg)时，该行变为不可见而不是显示为直线... < / p>