直線的なSVGパスをアニメーションしてカーブしますか？

Question

私は2つのSVGを持っています。どちらも3行からできています。

<?xml version="1.0" encoding="utf-8"?> 
 
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t viewBox="0 0 1000 521.8" style="enable-background:new 0 0 1000 521.8;" xml:space="preserve"> 
 
<style type="text/css"> 
 
\t .st0{fill:#FFFFFF;} 
 
\t .st1{fill:none;stroke:#000000;stroke-width:106;stroke-miterlimit:10;} 
 
</style> 
 
<g> 
 
\t <path class="st0" d="M0,261.9h77c27.5,0,72.5,0,100,0h823"/> 
 
\t <path class="st1" d="M0,261.9h77c27.5,0,72.5,0,100,0h823"/> 
 
</g> 
 
<g> 
 
\t <path class="st0" d="M0,463.9h77c27.5,0,72.5,0,100,0h823"/> 
 
\t <path class="st1" d="M0,463.9h77c27.5,0,72.5,0,100,0h823"/> 
 
</g> 
 
<g> 
 
\t <path class="st1" d="M0,59.9h77c27.5,0,72.5,0,100,0h823"/> 
 
</g> 
 
</svg>

とIは同じ3つのラインを持っているが、ただ一緒に編ま二番目に：

<?xml version="1.0" encoding="utf-8"?> 
 
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t viewBox="0 0 1000 521.8" style="enable-background:new 0 0 1000 521.8;" xml:space="preserve"> 
 
<style type="text/css"> 
 
\t .st0{fill:#FFFFFF;} 
 
\t .st1{fill:none;stroke:#000000;stroke-width:106;stroke-miterlimit:10;} 
 
</style> 
 
<g> 
 
\t <path class="st0" d="M0,261.9h77c27.5,0,71.7-5.9,98.3-13.1L825.7,72.9c26.5-7.2,70.8-13.1,98.3-13.1h76"/> 
 
\t <path class="st1" d="M0,261.9h77c27.5,0,71.7-5.9,98.3-13.1L825.7,72.9c26.5-7.2,70.8-13.1,98.3-13.1h76"/> 
 
</g> 
 
<g> 
 
\t <path class="st0" d="M0,463.9h77c27.5,0,71.7-5.9,98.3-13.1l650.5-175.9c26.5-7.2,70.8-13.1,98.3-13.1h76"/> 
 
\t <path class="st1" d="M0,463.9h77c27.5,0,71.7-5.9,98.3-13.1l650.5-175.9c26.5-7.2,70.8-13.1,98.3-13.1h76"/> 
 
</g> 
 
<g> 
 
\t <path class="st1" d="M0,59.9h77c27.5,0,69.8,10.7,94,23.8l660,356.5c24.2,13.1,66.5,23.8,94,23.8h75"/> 
 
</g> 
 
</svg>

線は直線である第一のSVGで

何らかのトランジション機能があるのでしょうか？それ以外はどうすればいいでしょうか

Answer 1

はい、可能です。オンラインで（そしてこのサイトで）たくさんの例があります。 「svgパストゥイーン」または「svgパスモーフィング」を検索します。

知っておくべき重要なルールは、元の行と最後の行が同じ順序で同じパスコマンドセットを持たなければならないということです。現時点では、元の行には「Mhch」が含まれていますが、編み線は「MhcLch」です。仕事にd属性のアニメーションためには

Original: M 0,261.9 
      h 77 
      c 27.5,0,72.5,0,100,0 
      h 823 

Final: M 0,261.9 
      h 77 
      c 27.5,0,71.7-5.9,98.3-13.1 
      L 825.7,72.9 
      c 26.5-7.2,70.8-13.1,98.3-13.1 
      h 76 

。元のパスを "MhcLch"に変更する必要があります。