10

円弧が 0 度から始まり 360 度で終わるように、SVG でアニメーション化された円弧/円を定義する方法を知っている人はいますか?

4

7 に答える 7

8

1つの方法は、円を使用して、stroke-dashoffsetをアニメーション化することです（「stroke-dasharray」も必要です）。このようなアニメーションの例（円ではありませんが、同じ原理が適用されます）をここで見ることができます。

もう1つのオプションは、パスアニメーションとアークパスセグメントを使用して、パス間のアニメーション化/モーフィングを行うことです。この例を参照してください。

于 2010-07-16T06:55:07.170 に答える
8

パスのlinetoを使用して「手作業で」ペイントし、円弧の位置を計算できます。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
   viewBox="0 0 1200 800"
   preserveAspectRatio="xMidYMid"
   style="width:100%; height:100%; position:absolute; top:0; left:0;"
   onload="drawCircle();"> 
  <script> 
    function drawCircle() {
        var i = 0;
        var circle = document.getElementById("arc");
        var angle = 0;
        var radius = 100;     
        window.timer = window.setInterval(
        function() {
            angle -=5;  
            angle %= 360;
            var radians= (angle/180) * Math.PI;
            var x = 200 + Math.cos(radians) * radius;
            var y = 200 + Math.sin(radians) * radius;
            var e = circle.getAttribute("d");
            if(i==0) {
                var d = e+ " M "+x + " " + y;
            }
            else {
                var d = e+ " L "+x + " " + y;
            }
            if (angle === -5 && i !== 0) {
                window.clearInterval(window.timer);
            }

            circle.setAttribute("d", d);
            i++;
        } 
      ,10)
    }
    </script> 

    <path d="M200,200 " id="arc" fill="none" stroke="blue" stroke-width="2" />
</svg>

http://jsfiddle.net/k99jy/138/

于 2010-07-16T07:23:09.957 に答える
5

circleおよび次の手法を使用して、SVG を手動で描画することもできます。

  1. を与えcircleますstroke。
  2. 円の円周stroke dashedに等しいダッシュの長さで を作成します。
  3. strokeを円周と同じ長さだけオフセットします。
  4. ストロークをアニメーション化します。

HTML:

<svg width="200" height="200">
  <circle class="path" cx="100" cy="100" r="96" stroke="blue" stroke-width="4" fill="none" />
</svg>

CSS:

circle {
  stroke-dasharray: /* circumference */;
  stroke-dashoffset: /* circumference */;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: /* length at which to stop the animation */;
  }
}

jsfiddle

ソース: https://css-tricks.com/svg-line-animation-works/

于 2017-01-05T15:05:47.327 に答える
2

また、パーセントまたは角度で単純に円弧を作成できないことにも少しがっかりしました。

現在、長いパスの一部ではない円弧が必要な場合は、円と strokeDasharray のトリックを使用して、この円の一部だけを表示しています。

svg {
  outline: solid;
  height: 100px;
  width: 100px;
}
.arc {
  fill: transparent;
  stroke-width: 5;
  stroke: red;
  stroke-dasharray: 94.24778 219.91149;
}
<svg viewport="0 0 100 100">
  <circle cx="50" cy="50" r="50" class="arc"></circle>
</svg>

Sass を使用して計算を行う改良版をここで見ることができます。

于 2015-11-25T19:22:21.060 に答える
-1

回答ありがとうございます。SVG で円をアニメーション化する理由について、もう少し詳しく説明します。

サーバークライアントアプリケーションがあります。サーバー上でチャート (円グラフ/棒グラフ) を表す SVG 画像を生成し、SVG をクライアントに送信する予定です。Java および .NET クライアントがあります。サーバーから受信した SVG 画像を解析してレンダリングするクライアント側コードを記述します。SVG 形式のサブセットのみを使用する予定です。これは、グラフを表すために必要なもの以上ではありませんが、アニメーションは必須です。

長期的には、Java または .NET ランタイムのないブラウザーで実行される ajax クライアントがあればよいでしょう。そのため、SVG 形式を選択しました。

短期的な解決策として、開始角度とスイープ角度を使用して円弧を定義し、SVG に独自の要素を追加すると思います。次に、スイープ角度をアニメーション化することで、必要なアニメーションを簡単に定義でき、実装が簡単になります。

長期的には、AJAX/HTML クライアントを実際に実装する場合は、再実装して SVG 標準に固執する必要があります。

于 2010-07-16T11:21:48.047 に答える