Geek Answers Handbook

Best way to display stream motion in SVG?

I want to create a web page showing things like flowing liquids. For this, I want to use SVG graphics, where the start and stop of a (repeating) movement is controlled using JavaScript.

This movement can be easily shown in a manner similar to this hand-drawn GIF:
enter image description here

But how can I achieve this look by simple means in SVG? Moreover, this should also go around the corners, i.e. Not only linear motion is required ...

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

+4
source share
1 answer

OK, now I have found the answer to the "first" part of the question, i.e. top stream :

<?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>

This was created in Inkscape (+ manual simplifications after publishing only the appropriate materials), simply duplicating one line with different widths, very large ( id=path1 ) in black for the environment, large ( id=path2 ) for red liquid and a little dashed ( id=path3 ), which will later be used for animation.

All that remains to be done is to change the stroke-dashoffset attribute using JavaScript or CSS animations, as this will move the small bars to indicate the flow. For instance:.

  <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 does not have to be straight :)

Bottom stream:
Using the ideas of http://owl3d.com/svg/tubefy/articles/article3.html , I also found a solution (better: a workaround) for the "bottom stream". The idea is to simply clone the path several times and use differently colored strokes drawn on top of each other. The animation goes as above. Both can be seen together now: http://jsfiddle.net/pXkvD/2

+3
source

More articles:


All Articles