在SVG中显示流动运动的最佳方法？

Question

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

可以通过以下手绘GIF轻松地显示此运动：

但是，如何在SVG中通过简单的方法实现这种外观？尤其是因为它也必须在拐角处流动，即不仅需要线性运动...

最好已经在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稍后将用于动画的小虚线 ( )。

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

   <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