在 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）周围是黑色的，一条大线（@ 987654327@) 用于红色流体和一个小的虚线 (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