在SVG中定義一個圓弧/弧形動畫

有誰知道如何在SVG中定義一個動畫弧/圓，使得弧開始於0度並以360度結束？在SVG中定義一個圓弧/弧形動畫

2010-07-15 GarethOwen

我想動畫後掠角，但在SVG電弧被定義使用起點和終點。 – GarethOwen 2010-07-15 15:12:33

你可以畫爲「手動」使用路徑的了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-16 07:23:09

謝謝räph。我還是SVG的新手，並沒有使用過

一種方法是使用一個圓，併爲stroke-dashoffset設置動畫（您也需要'stroke-dasharray'）。這樣一個動畫的例子（不是用圓圈，但同樣的原則適用）可以看到here。

另一個選擇是使用路徑動畫和arc path segments來進行路徑之間的動畫/變形，請參閱example。

來源

2010-07-16 06:55:07

謝謝埃裏克 - 鏈接到http://www.carto.net/papers/svg/samples網站向我展示了一些有趣的想法和技術的SVG動畫。 – GarethOwen 2010-07-16 08:19:49

-1

感謝您的答案 - 這裏是關於爲什麼我要多一點信息在SVG中創建一個圓圈動畫：

我們有一個服務器客戶端應用程序。我計劃生成SVG圖像以表示服務器上的圖表（餅圖/條形圖）並將SVG發送給客戶端。我們有Java和.NET客戶端。我將編寫客戶端代碼來解析和呈現從服務器接收到的SVG圖像。我打算只使用SVG格式的一個子集 - 不超過我們需要代表我們的圖表，但動畫是一個要求。

長期來說，擁有一個ajax客戶端會很好 - 它可以在沒有Java或.NET運行時的瀏覽器上運行。這就是我選擇SVG格式的原因。

對於短期解決方案，我現在認爲我會將自己的元素添加到SVG中，使用開始和掃掠角定義弧。然後，我可以通過動畫掃描角度輕鬆定義所需的動畫，並使我的實現變得簡單。長期來說 - 如果我們真的想要增加一個AJAX/HTML客戶端 - 我將不得不重新實現並堅持SVG標準。

來源

2010-07-16 11:21:48 GarethOwen

好的！我很好奇：關於您的短期解決方案，當您聲明自己的svg元素時 - 您的客戶如何呈現這些元素？你解析你的xml並在本地繪製它們嗎？ – 2010-07-16 12:34:40

是的，我將解析XML並使用本地圖形API繪製元素（在Java中爲Graphics2D，在.NET中爲GDI +）。 – GarethOwen 2010-07-16 14:13:07

您可能應該編輯您的問題而不是回答它。順便說一下;你可以使用半輪圈繪製弧;我的答案中的密碼顯示給你一個動畫。 – 2015-11-25 19:24:32

或許你會發現一個預先繪製圓發出所需的效果：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="400" height="400"> 
    <rect x="0" y="0" width="1000" height="1000"/> 
    <circle cx="500" cy="500" r="500" fill="red"/> 
    <rect x="0" y="500" width="1000" height="500"/> 
    <rect x="0" y= "0" width="1000" height="500"> 
    <animateTransform attributeName="transform" type="rotate" begin="0s" dur="5s" fill="freeze" from="0,500,500" to="180,500,500"/> 
    </rect> 
</svg>

來源

2013-09-08 18:44:04

揭開這個圓圈是一個很酷的想法，我喜歡你的半圓案例。 – GarethOwen 2013-09-09 06:48:02

我當時也有點disapointed不能夠簡單地做出一個圓的弧百分比，或角度。現在，當我需要一個不是較長路徑一部分的弧時，我使用一個圓和筆畫Dasharray技巧來顯示這個圓的一部分。

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>

你可以看到一個改進版本here其使用薩斯進行計算。

來源

2015-11-25 19:22:21

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <title></title> 
 
    <link rel="stylesheet" href=""> 
 
</head> 
 
<body> 
 
    
 
</body> 
 
<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() { 
 
     // center point 
 
     var cX = 300, 
 
      cY = 300; 
 
      radius = 300, 
 

 
      p1 = {x: cX+radius, y: cY}, 
 
      p2 = {x: cX-radius, y: cY}, 
 

 
      circle = document.getElementById("arc"), 
 
      angle = 0; 
 

 
     window.timer = window.setInterval(
 
      function() { 
 
      angle -= 5; 
 
      angle %= 360; 
 
      var radians= (angle/180) * Math.PI; 
 
      var x = cX + Math.cos(radians) * radius; 
 
      var y = cY + Math.sin(radians) * radius; 
 

 
      if (Math.abs(angle) < 180 && angle != 0) 
 
       d= 'M ' + p1.x + ',' + p1.y + ' A' + radius+ ',' + radius+ (Math.abs(angle)==180?' 0 1 0 ':' 0 0 0 ')+x+' '+y; 
 
      else 
 
       d= 'M ' + p1.x + ',' + p1.y + ' A' + radius+ ',' + radius+ ' 0 1 0 '+p2.x+' '+p2.y + 
 
      ' M ' + p2.x + ',' + p2.y + ' A' + radius+ ',' + radius+ (Math.abs(angle)==0?' 0 1 0 ':' 0 0 0 ')+x+' '+y; 
 
      
 
      circle.setAttribute("d", d); 
 

 
      if (Math.abs(angle) == 0) 
 
       window.clearInterval(window.timer); 
 
     } 
 
     ,10) 
 
    } 
 
    </script> 
 
    <path d="" id="arc" fill="none" stroke="blue" stroke-width="2" /> 
 
</svg> 
 
</html>

來源

2016-03-19 19:59:44 tdjprog

還可以繪製使用circle用手SVG及以下技術：

給了circle一個stroke。
充分利用strokedashed以破折號長度等於圓的周長。
通過等於圓的圓周上的長度偏移量stroke。
動畫中風。

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-05 15:05:47

相關問題