Лучший способ отображения движения потока в SVG?

Question

Я хочу создать веб-страницу, в которой отображаются такие вещи, как текучие жидкости. Для этого я хочу использовать графику SVG, где запуск и остановка (повторяющегося) движения контролируется с помощью JavaScript.

Это движение можно легко показать, таким образом, как эта рисованной GIF:

Но как я могу achive такой взгляд простыми средствами в SVG? Тем более, что это также имеет течь вокруг углов, то есть не требуется только линейное движение ...

Предпочтительно уже (полуавтоматический) creatable в 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