6

流れる流体のようなものを表示する Web ページを作成したいと考えています。このために、(繰り返し) モーションの開始と停止が JavaScript によって制御される SVG グラフィックスを使用したいと考えています。

このモーションは、この手描きの GIF のような方法で簡単に示すことができます。
ここに画像の説明を入力

しかし、SVG で簡単な方法でそのような外観を実現するにはどうすればよいでしょうか? 特に、これもコーナーを回って流れる必要があるため、つまり、直線的な動きだけが必要なわけではありません...

できれば、Inkscapeですでに（半自動で）作成可能です...

4

1 に答える 1

5

さて、質問の「最初の」部分、つまり上部の「フロー」に対する答えが見つかりました。

<?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で作成されました（+関連するものだけを投稿するために後で手作業で簡略化）。幅の異なる1つの線を複製するだけ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

于 2012-06-17T12:20:10.887 に答える