Question

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

这种动作可以通过这种手绘GIF的方式轻松显示：
enter image description here

但是如何通过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）将在稍后用于动画。

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

   <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

看到两者

在SVG中显示流动的最佳方法是什么？

1 个答案: