1. 首頁
  2. 問答
  3. SVG Animate polilines轉換

SVG Animate polilines轉換

2014-06-25 77 views
1

任何人都可以發表如何動畫svg折線或路徑的示例嗎？SVG Animate polilines轉換

我想動畫從藍色到灰色線的過渡。理想情況下，我正在尋找一種解決方案，可以在不知道其點的座標數的情況下使用任何灰線。

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
</head> 
<body> 
    <div style="height: 200px; width: 500px; border: 1px solid #ccc;"> 

     <svg height="200" width="500" xmlns="http://www.w3.org/2000/svg"> 
      <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" 
         style="fill: none; stroke: gray; stroke-width: 3" /> 

      <polyline points="20,20 40,20 60,20 80,20 120,20 200,20" 
         style="fill: none; stroke: blue; stroke-width: 3" /> 
     </svg> 
    </div> 
</body> 
</html>

來源

2014-06-25 user3455395

回答

1

您可以通過動畫標籤使用SMIL動畫折線。如果你需要IE支持，那麼你必須使用類似fakeSmile的東西。

您需要保持點的數量相同，即如果您有10點多邊形，則必須將其轉換爲10點多邊形以獲得平滑過渡，否則將執行步驟更改轉換。您可以始終將多邊形中的一個點加倍，以使它們具有相同的點數。

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
</head> 
<body> 
    <div style="height: 200px; width: 500px; border: 1px solid #ccc;"> 

     <svg height="200" width="500" xmlns="http://www.w3.org/2000/svg"> 
      <polyline points="20,20 40,20 60,20 80,20 120,20 200,20" 
         style="fill: none; stroke: blue; stroke-width: 3"> 
       <animate dur="5s" fill="freeze" attributeName="points" 
         to="20,20 40,25 60,40 80,120 120,140 200,180"/> 
       <animate dur="5s" fill="freeze" attributeName="stroke" 
         to="gray"/> 
      </polyline> 
     </svg> 
    </div> 
</body> 
</html>

來源

2014-06-26 08:31:06

相關問題

 相關問題