javascript - 在 SVG 中显示流运动的最佳方式？

Question

我想创建一个网页来显示流动的流体之类的东西。为此，我想使用 SVG 图形，其中(重复)运动的开始和停止是通过 JavaScript 控制的。

这个 Action 可以很容易地通过手绘 GIF 的方式显示:

但是我怎样才能通过简单的方法在 SVG 中实现这样的外观呢？特别是因为它还必须绕过拐 Angular ，即不仅需要线性运动...

最好已经(半自动)在 Inkscape 中创建...

Answer 1

好的，现在我找到了问题“第一”部分的答案，即上层“流”:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="202"
   height="32"
   id="svg2">
  <g id="layer1">
    <path
       d="m 1,16 200,0"
       id="path1"
       style="stroke:#000000;stroke-width:30" />
    <path
       d="m 1,16 200,0"
       id="path2"
       style="stroke:#ff0000;stroke-width:20" />
    <path
       d="m 1,16 200,0"
       id="path3"
       style="stroke:#000000;stroke-width:16;stroke-dasharray:48, 48;stroke-dashoffset:10.6" />
  </g>
</svg>

这是在 Inkscape 中创建的(+ 之后手动简化以仅发布相关内容)只是通过复制一条具有不同宽度的线，一个非常大的线( id=path1 )为周围的黑色，一个大的线( id=path2 )为红色液体和一个小的虚线液体 (id=path3)，稍后将用于动画。

现在剩下要做的就是通过 JavaScript 或 CSS 动画更改 stroke-dashoffset 属性，因为这会移动小条以指示流。例如:

   <style type="text/css">  
      @keyframes move {  
        from {  stroke-dashoffset: 0;  }  
        to   {  stroke-dashoffset: 96;  }  
      }  
      @-moz-keyframes move {  
        from {  stroke-dashoffset: 0;  }  
        to   {  stroke-dashoffset: 96;  }  
      }  
      @-webkit-keyframes move {  
        from {  stroke-dashoffset: 0;  }  
        to   {  stroke-dashoffset: 96;  }  
      }  
  </style>  

然后在 <path id="path3"> 元素中:

  animation-duration: 3s;  
  -moz-animation-duration: 3s;  
  -webkit-animation-duration: 3s;  
  animation-name: move; 
  -moz-animation-name: move; 
  -webkit-animation-name: move; 
  animation-timing-function: linear; 
  -moz-animation-timing-function: linear; 
  -webkit-animation-timing-function: linear; 
  animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite; 

注意:路径可以是任何形状，不需要是直的:)

下流:
通过使用 http://owl3d.com/svg/tubefy/articles/article3.html 的想法，我还找到了“较低流量”的解决方案(更好:解决方法)。这个想法只是多次克隆路径并使用彼此绘制的不同颜色的破折号。动画如上。现在可以在以下位置看到两者:http://jsfiddle.net/pXkvD/2