小编Maš*_*ija的帖子

使用 SVG 制作逼真的(正弦曲线)旗帜动画/颤动

我正在尝试制作一个更逼真的svg随风飘扬的动画旗帜。这是我目前正在使用的一个简单的标志库:

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="200px"
  height="100px"
  viewBox="0 0 200 100"
>
  <path
    fill="red"
    d=
    "
      M 20,20
      Q 25,10 50,20
      T 80,20
      L 80,80
      Q 75,90 50,80
      T 20,80
      z
    "
  >
    <animate
      dur="1.8s"
      attributeName="d"
      fill="freeze"
      repeatCount="indefinite"
      values=
      "
        M 20,20
        Q 25,10 50,20
        T 80,20
        L 80,80
        Q 75,90 50,80
        T 20,80
        z;

        M 20,30
        Q 35,30 50,20
        T 80,20
        L 80,80
        Q 65,70 50,80
        T 20,90
        z;

        M 20,20
        Q 25,10 50,20
        T 80,20
        L 80,80
        Q …
Run Code Online (Sandbox Code Playgroud)

html css animation svg smil

2
推荐指数
1
解决办法
1206
查看次数

标签 统计

animation ×1

css ×1

html ×1

smil ×1

svg ×1