悬停时的 SVG 动画 - 第一步，如何做？答案

【问题标题】：SVG-animation on hover - first steps, how to?悬停时的 SVG 动画 - 第一步，如何做？
【发布时间】：2017-06-10 13:29:47
【问题描述】：

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

由于我在两种情况下（标准和悬停状态）都使用了 svg 元素，我想我必须通过编辑内联的 svg 代码来以某种方式在悬停第一个 svg 元素时对其进行操作。

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

感谢您的回答！

svg-image(s) 的代码在这里

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

【问题讨论】：

看看greensock ...但是你真的想要一个不能在触摸设备上工作的状态的巨大库吗？如何在悬停时交换取决于您在页面上使用 svg 的方式：内联 svg、img、背景图像。可以只使用 css 或通过 js。

标签： svg svg-animate svg.js

【解决方案1】：

您可以使用 JavaScript 来操作 points 属性的值，但这种变化会很突然，所以这种变化看起来就像一部定格电影。

像这样Codepen，你可以做的是给path元素一个stroke-dasharray，它等于path的getTotalLength，以便“擦除” （箭头的）直线离开页面，然后快速切换d属性的值，然后将线“重绘”回到页面上？

但是，我认为这不是您要寻找的。我相信 HTML5 Canvas，以我对它的了解有限，将是您想要完成的更可行的选择。

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

【讨论】：