93 svg学习记录 svg动画详细介绍dashoffset

最新推荐文章于 2024-10-25 21:30:00 发布

若学姐(前端)

最新推荐文章于 2024-10-25 21:30:00 发布

阅读量337

点赞数

文章标签：前端

本文链接：https://blog.youkuaiyun.com/samllucky/article/details/131472681

版权

本文详细介绍了SVG（可缩放矢量图形）中的基本元素属性，如矩形、圆形、椭圆、线、折线、多边形和路径的定义及用法。同时，讲解了如何通过style属性设置填充、边线颜色和透明度。此外，重点阐述了path命令的不同路径定义方式以及stroke-dasharray和stroke-dashoffset属性在创建流动效果（如蚂蚁线）中的应用，并提供了JavaScript和CSS实现流动线条的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.svg上的属性

 <svg
    xmlns="http://www.w3.org/2000/svg"  使用的标准
    height="98"                         宽高
    width="581"
    viewBox="0 0 581 98"                viewBox可视区域
 ></svg>

2.元素常见的一些其他属性

预定义形状元素
         矩形 <rect>
         圆形 <circle>
         椭圆 <ellipse>
         线 <line>
         折线 <polyline>
         多边形 <polygon>
         路径 <path>

例子：  <rect width="300" height="100"  style="fill: rgb(0, 0, 255); stroke-width: 1; stroke: rgb(0, 0, 0)"  ></rect>

---------------------------------------------------------
常见style属性：
opacity: 控制整体透明度

fill: 填充颜色 rgb(0,0,0) 或 颜色值;
fill-opacity: 填充透明度

stroke: 边线颜色 rgb(0,0,0) 或 颜色值;
stroke-width: 边线宽度
stroke-opacity：边线透明度

3.line、polyline、path的对比

//line设置起点、终点
<line x1="0" y1="0"  x2="200"  y2="200" style="stroke: rgb(255, 0, 0); stroke-width: 2" />

//polyline设置折线段 points属性设置 =点1 点2 点3
 <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
              style="fill: none; stroke: black; stroke-width: 3" />

//path和polyline的区别在于有更多的命令，可以设置曲线，详情，见下面4
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
  stroke-width="3" fill="none" />

4.path定义命令

元素用于定义一个路径。下面的命令可用于路径数据：

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto 竖直的画一条线
C = curveto 曲线至
S = smooth curveto
Q = quadratic Bézier curve 二次贝塞尔曲线
T = smooth quadratic Bézier curveto
A = elliptical Arc  椭圆弧
Z = closepath 闭合path

注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
大写 absolute(绝对定位相对于svg盒子) 小写 relative(相对定位相对于前一个点的位置)


<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <path d="M150 0 L75 200 L225 200 Z" />              //都是大写字母都是绝对定位
   <path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
  stroke-width="3" fill="none" />       //先大写后小写，第一个点先绝对定位，后面的点相对前面的点
  <path id="lineBC" d="M 250 50 l 150 300" stroke="red"
  stroke-width="3" fill="none" />
</svg>

5.绘制流动的线--stroke-dashoffset

dash：虚，阴影      dashed line 虚线

因此storke-dashoffset是虚线的时候才会有的属性，所以必须先设置stroke-dasharray

stroke-dasharray:用于创建虚线
    "10"-->"10 10"
    "10 20"-->"实 虚"

stroke-dashoffset：指定了 dash 模式到路径开始的距离

这个属性是相对于起始点的偏移，正数偏移x值的时候，相当于往左移动了x个长度单位，负数偏移x的时候，相当于往右移动了x个长度单位。
需要注意的是，不管偏移的方向是哪边，要记得dasharray 是循环的，也就是 虚线-间隔-虚线-间隔。
这个属性要搭配stroke-dashoffset才能看得出来效果，非虚线的话，是无法看出偏移的。


因为蚂蚁线是循环的，所以当你的线的长度是固定的，不管偏移多少，你的线的长度是不会变的

第一种：使用js代码设置

<div class="squiggle-container squiggle-animated">
  <svg xmlns="http://www.w3.org/2000/svg" height="98" width="581" viewBox="0 0 581 98">
   <path d="M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215 28.8 5-16.7-7-49.1-34-44-34 11.5-31 46.5-14 69.3 9.38 12.6 24.2 20.6 39.8 22.9 91.4 9.05 102-98.9 176-86.7 18.8 3.81 33 17.3 36.7 34.6 2.01 10.2.124 21.1-5.18 30.1"
          stroke="#000"
          stroke-width="4.3"
          fill="none"
        ></path>
      </svg>
    </div>


<script>
 var path = document.querySelector(".squiggle-container path");
      //获取path的长度
      var length = path.getTotalLength();
      //清除之前的动作
      path.style.transform = path.style.WebkitTransition = "none";
      //设置起点
      path.style.strokeDasharray = `${length} ${length}`;
      path.style.strokeDashoffset = length;

      // 获取一个区域，获取相关的样式，让浏览器寻找一个起始点。
      path.getBoundingClientRect();
      // 定义动作
      path.style.transition = path.style.WebkitTransition =
        "stroke-dashoffset 2s ease-in-out";
      // Go!
      path.style.strokeDashoffset = "0";
</script>

5.1流动的蚂蚁线

第二种：设置css(常用)


流动的蚂蚁线：-----------------------------------------------------------------
 <path class="squild-path"
        d="M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215 28.8 5-16.7-7-49.1-34-44-34 11.5-31 46.5-14 69.3 9.38 12.6 24.2 20.6 39.8 22.9 91.4 9.05 102-98.9 176-86.7 18.8 3.81 33 17.3 36.7 34.6 2.01 10.2.124 21.1-5.18 30.1"
        stroke="red"
        stroke-width="4.3"
        fill="none"
      ></path>

<style>

.squild-path {
        stroke-dasharray: 80 80;
        stroke-dashoffset: 1000;
        /* 此处8s,offset从1000变为0,所以会控制速度 */
        animation: move 8s linear infinite;
      }

      @keyframes move {
        100% {
          stroke-dashoffset: 0;
        }
      }
    
从代码可以看出 8s中内 stroke-dashoffset 从1000变为0,所以移动的速度可以从这两个地方入手
</style>

5.2流动的实线

流动的实线：原理则是path的长度和dasharray的长度一样，并且蚂蚁线整体向左dashoffset线长，这样path部分只在蚂蚁线的虚线部分

流动的实线：---------------------------------------------------------------------
 <path class="squild-path"
        d="M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215 28.8 5-16.7-7-49.1-34-44-34 11.5-31 46.5-14 69.3 9.38 12.6 24.2 20.6 39.8 22.9 91.4 9.05 102-98.9 176-86.7 18.8 3.81 33 17.3 36.7 34.6 2.01 10.2.124 21.1-5.18 30.1"
        stroke="red"
        stroke-width="4.3"
        fill="none"
      ></path>

<style>

.squild-path {
        stroke-dasharray: 100;
        stroke-dashoffset: 100;
        animation: move 8s linear both;
      }

      @keyframes move {
        100% {
          stroke-dashoffset: 0;
        }
      }
    
此处假设path长度为100（不够可以再加），因为100实，100虚，而stroke-dashoffset: 100;为100,整个蚂蚁线是无线循环的，所以在path可见区域内，正好，只能看见100虚，当dashoffset，慢慢减小为0，整个蚂蚁线都整体往右移动，实线部分慢慢出现，直至100。
</style>

6.转动的蚂蚁线圆

 <svg
      width="160" height="160" viewBox="0 0 160 160" fill="none"                 
      xmlns="http://www.w3.org/2000/svg" >
      <circle class="circle-round" cx="80" cy="80" r="78" fill="#E68E86"
        fill-opacity="0.2" stroke="#E85B4E" stroke-width="4" />
    </svg>

<style>
 .circle-round {
        /* stroke-dasharray控制线长什么样 */
        stroke-dasharray: 8 8;
        /* stroke-dashoffset控制线一开始向左偏移多少 */
        stroke-dashoffset: 62;
        animation: move 2s linear infinite;
      }
      @keyframes move {
        100% {
          stroke-dashoffset: 0;
        }
      }
</style>

主要让蚂蚁线一直动起来，所以记得设置动画infinite 重复播放