javascript - Best way to display flow motion in a SVG? - Stack Overflow

admin管理员组

文章数量:1389754

I want to create a web page that's showing stuff like flowing fluids. For this I want to use SVG graphics where the start and stop of the (repeating) motion is controlled via JavaScript.

This motion can be easily shown by a way like this hand drawn GIF:

But how can I achive such a look by simple means in a SVG? Especially as this also has to flow around corners, i.e. not only a linear motion is required...

Preferably already (semi-automatically) creatable in Inkscape...

I want to create a web page that's showing stuff like flowing fluids. For this I want to use SVG graphics where the start and stop of the (repeating) motion is controlled via JavaScript.

This motion can be easily shown by a way like this hand drawn GIF:

But how can I achive such a look by simple means in a SVG? Especially as this also has to flow around corners, i.e. not only a linear motion is required...

Preferably already (semi-automatically) creatable in Inkscape...

• javascript
• html
• svg
• inkscape

Share Improve this question Follow edited Jun 17, 2012 at 11:17 Chris asked Jun 16, 2012 at 16:53 ChrisChris 3,40577 gold badges4040 silver badges5151 bronze badges 5

• Not sure about SVG, but nerget./fluidSim/this fluid dynamics simulation has been implemented in JavaScript using canvas. If you have a look at the source code, it's pretty easy to follow. It says that it's based on the Navier Stokes equations. You should look up Lattice Boltzmann method as well. I'm not 100% on this, but I think the Lattice Boltzmann may be a discrete method for approximating the Navier Stokes equation. – Joe Commented Jun 16, 2012 at 18:39
• @Joe: the link is wrong: here the correction – CapelliC Commented Jun 16, 2012 at 22:25
• @Joe - thanks for the link to this great demo! But I'm sorry that I have to say that this doesn't even closely relate to my question :( I wand to display "fake" motion that could animate the flow in pipes like at em-ebook-shop./… – Chris Commented Jun 17, 2012 at 11:15
• This page has a number of demos, one of which is srufaculty.sru.edu/david.dailey/svg/curve.svg. I'm sure if you look at it, you can determine how they did it. Going around corners and shapes is a bit more challenging, but there are some other demos on that page that show that too, plus several tutorials are online. – Jared Farrish Commented Jun 17, 2012 at 12:39
• @Jared Farrish: thanks, I'll start looking there. Inbetween I also found owl3d./svg/vsw/articles/vsw_article.html which I think is also heading in the right direction... – Chris Commented Jun 17, 2012 at 12:52

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

OK, now I found the answer to the "first" part of the question, i.e. the upper "flow":

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:svg="http://www.w3/2000/svg"
   xmlns="http://www.w3/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>

That was created in Inkscape (+ simplifications by hand afterwards to post only the relevant stuff) just by duplicating one line with different widths, a very big one (id=path1) in black for the surrounding, a big one (id=path2) for the red fluid and a small, dashed one (id=path3) that'll be used for the animation later on.

All that's now left to do is to change the stroke-dashoffset attribute via JavaScript or an CSS animation as that'll move the little bars to indicate flow. 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>  

and then in the <path id="path3"> element:

  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; 

Note: the path can have any shape, it doesn't need to be straight :)

The lower flow:
By using the ideas of http://owl3d./svg/tubefy/articles/article3.html I also found a solution (better: workaround) for the "lower flow". The idea is just to clone the path multiple times and use differently colored dashes drawn over each other. The animation goes as above. Both together can be seen now at: http://jsfiddle/pXkvD/2

本文标签： javascriptBest way to display flow motion in a SVGStack Overflow