SVG-animation on hover - 最初の手順は？

Question

私はそれをホバリングするときに要素にアニメーションを行いたいと思います。

私は両方の状況（標準とホバー状態）でsvg-elementsを使用しているので、svg-codeをインラインで編集して最初のsvg要素を操作する必要があります。

私は基本的にそこに出発点が必要でしょう： 私はどのようにアニメーション化された方法でホバーイメージを再描画し、それをスワップするだけではありませんか？ サードパーティのライブラリ（どちらですか）が必要ですか？ これらの状況が複数あった場合、htmlソース内に10個のsvg-codeをインラインに置かないと、コードをきれいに保つことができますか？

あなたの答えをありがとう！

SVGイメージ（複数可）のコードはここにある

<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

あなたは points属性の値を操作するためにJavaScriptを使用することができますが、このような変化は突然になるので、変更は次のようになり

ストップモーションフィルム。このCodepen同様

は、何を行うことができますことは、その後すぐに、path要素ページオフ（矢印の）直線を「消去」するために、pathのgetTotalLengthに等しいstroke-dasharrayを与えることですd属性の値を切り替えてから、その行をページに「再描画」しますか？

しかし、私はそれがあなたが探しているものだとは思わない。 HTML5 Canvasは、私の知識が限られているため、あなたが達成しようとしているものの実現可能なオプションになると思います。

実際、CSS3の3D変換であるlike soを使用している可能性があります。しかし、問題は、ラインには深さがないことです。そのため、最初にrotateX(90deg)をCSSのpathに設定すると、直線が表示されずに線が見えなくなります。