svg（针对path标签的简单分享）

一个无名之前端。。。

于 2024-06-21 21:08:54 发布

阅读量666

点赞数 29

文章标签： vue.js javascript 前端笔记经验分享

本文链接：https://blog.csdn.net/weixin_45733254/article/details/139869866

版权

网站 svg基础教程网站

例子一：

<svg 
  version="1.1"
  baseProfile="full"
  width="100%" height="100%"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 1400 800"
>

  <rect x="1300" y="400" rx="40" ry="40" width="300" height="300" stroke="rgb(129, 201, 149)" fill="rgb(129, 201, 149)">
    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="35s" type="rotate" from="0 1450 550" to="360 1450 550" repeatCount="indefinite" />
  </rect>

  <path d="M 100 350 A 150 150 0 1 1 400 350 Q400 370 380 370 L 250 370 L 120 370 Q100 370 100 350" stroke="rgb(253, 214, 99)" fill="rgb(253, 214, 99)">
    <animateMotion path="M 800 -200 L 800 -300 L 800 -200" dur="20s" begin="0s" repeatCount="indefinite" />
    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="30s" type="rotate" values="0 210 530 ; -30 210 530 ; 0 210 530" keyTimes="0 ; 0.5 ; 1" repeatCount="indefinite" />
  </path>

  <circle cx="200" cy="150" r="20" stroke="#1a73e8" fill="#1a73e8">
    <animateMotion path="M 0 0 L 40 20 Z" dur="5s" repeatCount="indefinite" />
  </circle>

  <!-- 三角形 -->
  <path d="M 165 580 L 270 580 Q275 578 270 570 L 223 483 Q220 480 217 483 L 165 570 Q160 578 165 580" stroke="rgb(238, 103, 92)" fill="rgb(238, 103, 92)">
    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="35s" type="rotate" from="0 210 530" to="360 210 530" repeatCount="indefinite" />
  </path>

  <circle cx="1200" cy="600" r="30" stroke="rgb(241, 243, 244)" fill="rgb(241, 243, 244)">
    <animateMotion path="M 0 0 L -20 40 Z" dur="9s" repeatCount="indefinite" />
  </circle>

  <path d="M 100 350 A 40 40 0 1 1 180 350 L 180 430 A 40 40 0 1 1 100 430 Z" stroke="rgb(241, 243, 244)" fill="rgb(241, 243, 244)">
    <animateMotion path="M 140 390 L 180 360 L 140 390" dur="20s" begin="0s" repeatCount="indefinite" />
    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="30s" type="rotate" values="0 140 390; -60 140 390; 0 140 390" keyTimes="0 ; 0.5 ; 1" repeatCount="indefinite" />
  </path>
</svg>

解释

1. path的坐标命令

移动类：
- M = moveto：将画笔移动到指定坐标。
直线类：
- L = lineto：画直线到指定坐标。
- H = horizontal lineto：画水平直线到指定坐标。
- V = vertical lineto：画垂直直线到指定坐标。
曲线类：
- C = curveto：画三次贝塞尔曲线经两个指定控制点到达终点坐标。
- S = shorthand/smooth curveto：与前一条贝塞尔曲线相连，控制点为前一条二次贝塞
- 尔曲线控制点的对称点，只需输入第二个控制点和终点，即可绘制一个三次贝塞尔曲线。
- Q = quadratic Bezier curveto：画二次贝塞尔曲线经一个指定控制点到达终点坐标。
- T = Shorthand/smooth quadratic Bezier curveto：与前一条二次贝塞尔曲线相连，控制点为前一条二次贝塞尔曲线控制点的对称点，只需输入终点，即可绘制一个二次贝塞尔曲线。
弧线类：
- A = elliptical arc：画椭圆曲线到指定坐标。
闭合类：
- Z = closepath：绘制一条直线链接终点和起点，用来封闭图形。

2. `<animateMotion path="M 0 0 L -20 40 Z" dur="9s" repeatCount="indefinite" />` 给父标签的形状添加路径动画 path是路径

3. 注意: 左右path内的坐标点是相对svg内部的坐标点

例子二：

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@8.3.14/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Physics Simulator Demo</title>
    <style>
      html,
      body {
        height: 100%;
        width: 100%;
        margin: 0;
      }
      .cc {
        width: 10px;
        height: 10px;
        background: green;
        position: absolute;
        top: -5px;
        left: -5px;
        border-radius: 5px;
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <div style="position: relative; height: 100%; width: 100%">
      <div id="0" class="cc"></div>
      <div id="1" class="cc"></div>
      <div id="2" class="cc"></div>
      <div id="3" class="cc"></div>
      <div id="4" class="cc"></div>
      <div id="5" class="cc"></div>
      <div id="6" class="cc"></div>
      <div id="7" class="cc"></div>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        style="width: 100%; height: 500px"
      >
        <path
          id="p0"
          fill="none"
          stroke="red"
          d="m 227.6035,38.929859 c -17.098,-6.615379 -35.43714,-5.654746 -53.72008,-5.654746 -28.88045,0 -78.608562,23.436783 -69.27063,60.788513 8.30718,33.228734 73.51169,-17.343534 73.51169,25.446354 0,111.52514 -170.5191138,45.29238 -156.919185,154.09181 2.924851,23.39881 26.328181,58.41063 40.996904,76.33907 58.597841,71.61958 74.550601,-43.6165 130.059141,-32.51479 51.57633,10.31527 43.90688,155.47922 168.22868,115.92228 167.51141,-53.29909 -59.7547,-112.77835 8.48212,-169.64236 48.39108,-40.32591 95.07686,92.99483 193.67503,8.48212 36.29006,-31.10577 60.13025,-119.23372 -1.41369,-145.6097 C 531.50007,113.83552 494.02863,119.47348 466.5165,101.13206 447.3794,88.373995 454.4009,55.952532 431.17434,45.99829 381.32712,24.635198 348.07325,65.928309 303.94257,71.444645 274.33127,75.146057 256.00673,42.987462 227.6035,38.929859 z"
        />
      </svg>
    </div>

    <script>
      const start = performance.now();
      const path = document.querySelector("#p0");
      function frame() {
        if (path) {
          const now = performance.now();
          const phase = ((now - start) / 6000) % 1;
          const len = path.getTotalLength();
          for (let index = 0; index < 8; index++) {
            const point = path.getPointAtLength((len - index * 100) * phase);
            const box = document.getElementById(index.toString());
            box &&
              (box.style.transform = `translate3d(${point.x}px,${point.y}px,0)`); // Chrome&Safari
          }
        }
        requestAnimationFrame(frame);
      }
      frame();
    </script>
  </body>
</html>