svg实现实时流动图

@[TOC]svg实现实时流动图

用svg绘制路径并实现路径动画

SVG，可缩放矢量图形（Scalable Vector Graphics），是一种用于描述二维图形的 XML 标记语言。

与位图图像不同，SVG 图像以文本形式存储，并且可以缩放到任意大小而不会失真，因为它们基于数学描述而不是像素。

svg使用详解

1. svg渐变线性---- linearGradient

<svg version="1.1" class="dpB" :style="{ width: svgWidth + 'px', height: svgHeight + 'px' }">
             <!-- 定义线性渐变 -->
             <linearGradient id="gradientMotionPath2" x1="0%" y1="0%" x2="100%" y2="100%" gradientUnits="userSpaceOnUse">
              <stop offset="0%" style="stop-color: rgba(45, 0, 255, 1)"></stop>
              <stop offset="100%" style="stop-color: rgba(225, 217, 255, 1)"></stop>
            </linearGradient>
            
            <path id="motionPath2" fill="none" :d="pathData3" stroke="url(#gradientMotionPath2)" stroke-width="2" stroke-dasharray="0"
              stroke-linecap="round" class="polyLine">
            </path>
</svg>

代码解析：

• 标签的id属性可为渐变定义一个唯一的名称
• 标签的X1，X2，Y1，Y2属性定义渐变起始点坐标和结束点坐标
• 渐变的颜色范围可由两种或多种颜色组成。渐变中可以包含多个 元素，每个 元素表示渐变中的一个颜色和位置。offset属性用来定义渐变的开始和结束位置。
• 填充属性把 ellipse 元素链接到此渐变
• stroke: 设置路径的描边颜色。告诉path使用指定ID值的渐变来描边这个路径

2. 路径---- path 。使用 元素可以绘制直线、曲线、弧线等各种复杂的图形，并且可以通过设置路径命令来控制路径的形状和样式。

<svg
  width="200"     <!-- 指定SVG画布的宽度 -->
  height="200"    <!-- 指定SVG画布的高度 -->
  xmlns="http://www.w3.org/2000/svg">   <!-- 指定SVG命名空间 -->
     <path
       d="path-data"            <!-- 定义路径的路径数据 -->
       fill="fill-color"        <!-- 路径的填充颜色 -->
       stroke="stroke-color"    <!-- 路径的描边颜色 -->
       stroke-width="width"     <!-- 路径的描边宽度 -->
       stroke-linecap="round"   <!-- 用于定义不同类型的开放数据的终结--路径两端是圆形还是方形 -->
     />
</svg>

属性解析：

1. d 属性定义了路径的路径数据，即路径命令序列。路径数据由一系列的路径命令组成，每个路径命令以字母开头，后面跟随一组数字参数。常用的路径命令包括：M（移动到）、L（直线到）、H（水平线到）、V（垂直线到）、C（三次贝塞尔曲线）、S（光滑曲线）、Q（二次贝塞尔曲线）、T（光滑二次贝塞尔曲线）、A（圆弧）、Z（闭合路径）等。
2. fill 属性定义了路径的填充颜色。
3. stroke 属性定义了路径的描边颜色。
4. stroke-width 属性定义了路径的描边宽度。

注意： 命令是大小写敏感的。大写的命令指定绝对坐标，而小写命令指定相对（于当前位置的）坐标。
–绝对坐标中，负的 x 和 y 将被解释为负坐标；
–相对坐标中，负的 x 值为向左移动，负的 y 值为向上移动

3. 定义一个元素如何沿着运动路径进行移动---- animateMotion 元素

 <path
    id="path1"
    d="M100,250 C 100,50 400,50 400,250"
    fill="none"
    stroke="blue"
    stroke-width="7.06" />