javascript - 在 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