ポリラインはパスアニメーションを設定します

ポリライン要素

ポリライン要素は SVG の基本形状であり、複数の点を結ぶ一連の直線を作成するために使用され、
その中の Points 属性はポリラインを作成するための一連の点を描画します。

<polyline
        points="1.64 94.48 45 94.48 45 2.9 1.64 2.9"
 />

アニメーション要素

1.attributeName 変更する要素の属性の名前

要素によって直接公開される属性にすることも、CSS 属性にすることもできます。

2.attributeType = “CSS | XML | auto” どのタイプの属性が変更されようとしていますか?

attributeType は、CSS/XML/auto の 3 つの固定パラメータをサポートしており、attributeName 属性値のリストを示すために使用されます。x、y、transformはXMLに属し、opacityはCSSに属します。デフォルト値はAutoで、自動識別を意味します（実際には最初にCSSとして扱われます。認識されないことが判明した場合は、そのままCSSとして処理されます） XMLカテゴリ)

3.アニメーション値の開始値から

4.アニメーション値終了値へ

5.アニメーションの相対変化値による

6.begin アニメーションの開始時間は、一連の値にすることができます。たとえば、begin="3s;5s" は、アニメーションが 3 秒後に 1 回移動し、5 秒後に再び移動することを意味します (アニメーションがまだ終了していない場合は、アニメーションが 3 秒後に再び移動します)。すぐに停止して最初からやり直してください）

7.アニメーション終了時間

8.dur アニメーションの長さ

9.repeatCount、repeatDur

repeatCount はアニメーションの実行回数を表し、有効な値にすることも、
アニメーションを繰り返す合計時間を定義する「無期限の」repeatDur にすることもできます。通常の時間値または「不定」を指定できます

ポリラインはパスアニメーションを設定します

1. ポイント値をパス値に変換します (最初の座標点を M に設定し、他の座標点を L に設定します)
2. アニメーションを使用して、ストローク-ダッシュ オフセット値をパスの長さに設定します

<!-- <polyline
      class="point"
        points="1.64 94.48 45 94.48 45 2.9 1.64 2.9"
        style="
          fill: none;
          stroke: #00e7b6;
          stroke-linecap: round;
          stroke-linejoin: round;
        "
      /> -->
      //将points转为path路径的d
      // stroke-dasharray属性用来定义描边的虚线长度
      <path
        d="M 1.64 94.48 L 45 94.48 L 45 2.9 L 1.64 2.9"
        style="
          fill: none;
          stroke: #24eb74;
          stroke-linecap: round;
          stroke-linejoin: round;
          stroke-width: 2px;
          stroke-dasharray: 0, 8;
        "
      >
     
     // 通过控制stroke-dashoffset的值大于path的长度，来达到‘绘图’的效果
     //stroke-dashoffse 定义dash模式到路径开始的距离，就是实线虚线绘制的起点距路径开始的距离
        <animate
          attributeName="stroke-dashoffset"
          from="178"
          to="-178"
          dur="8s"
          repeatCount="indefinite"
        />
      </path>