Polyline sets path animation

polyline element

The polyline element is a basic shape of SVG, used to create a series of straight lines connecting multiple points.
The points attribute inside it draws a series of points for making polylines.

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

animation element

1.attributeName The name of the element attribute to be changed

It can be an attribute directly exposed by the element, or it can be a CSS attribute.

2.attributeType = “CSS | XML | auto” What type of attribute is about to change?

attributeType supports three fixed parameters, CSS/XML/auto. Used to indicate the list of attributeName attribute values. x, y and transform belong to XML, and opacity belongs to CSS. Auto is the default value, which means automatic identification (actually, it is treated as CSS first. If you find that you don’t recognize it, it will be processed directly as XML category)

3.from animation value starting value

4.to animation value end value

5.by relative change value of animation

6.begin animation start time can be a set of values. For example, begin="3s;5s" means that the animation will start after 3s, and then start again after 5s (if the animation has not finished before, it will stop immediately and start from the beginning)

7.end animation end time

8.dur animation duration

9.repeatCount, repeatDur

repeatCount represents the number of animation execution times, which can be a legal value or "indefinite"
repeatDur defines the total time of repeating the animation. Can be a normal time value or "indefinite"

Polyline sets path animation

1. Convert the points value to a path value (set the first coordinate point to M and the others to L)
2. Use animation to set the stroke-dashoffset value to the length of the path

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