如何使一個SVG逐漸向jQuery的某個角度出現？

考慮下面的SVG三角形。我可以讓它出現由左到右是這樣的：如何使一個SVG逐漸向jQuery的某個角度出現？

$(document).ready(function() { 
 
    $('#image').animate({ 
 
    width: 200 
 
    }, 2000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg id="image" height="210" width="0"> 
 
    <polygon points="0,0 108,0 142,103" style="fill:black" /> 
 
</svg>

現在，有什麼辦法可以讓它逐漸出現，但有一定的角度，開始其斜邊和結束右上頂點？

來源

2016-02-29 David Matos

使用CSS [transform]（https://css-tricks.com/almanac/properties/t/transform/）。 –

你能給我任何指導嗎？我只使用CSS轉換來完成簡單的任務。如果我只想讓元素以jQuery動畫的特定順序出現，它會起作用嗎？（例如，使三角形1出現，然後是三角形2等） –

您可以使用SMIL動畫。因爲這種技術是簡單的鏈動畫直接在SVG：example

<svg id="image" height="300" width="300" viewBox="-50 -50 400 400"> 
    <polygon points="0,300 100,200 100,300" fill="yellow" stroke="black"> 
    <animateTransform 
     attributeName="transform" 
     id="first" 
     begin="0s" 
     dur="2s" 
     type="rotate" 
     from="0 100 300" 
     to="90 100 300" 
     fill="freeze" 
     repeatCount="1" />  
    </polygon> 
    <polygon points="200,300 300,200 300,300" fill="green" stroke="black"> 
    <animateTransform 
     attributeName="transform" 
     begin="first.end" 
     dur="1s" 
     type="rotate" 
     from="0 200 300" 
     to="-90 200 300" 
     fill="freeze" 
     repeatCount="1" />  
    </polygon> 
</svg>

看一下第二個動畫的begin="first.end"屬性。這是SMIL用來說這個動畫必須從另一個（我叫first）結束時開始的方式。嘗試這樣的事情：begin="first.end - 1s"。

來源

2016-03-01 10:46:58 Tolokoban

感謝您的答案，它不能解決問題，但我並沒有意識到SMIL動畫。無論如何，你的例子允許我旋轉三角形，但我需要的是讓它逐漸出現。該位置必須始終固定。另外，我應該可以通過jQuery來觸發效果。 –

如何使一個SVG逐漸向jQuery的某個角度出現？

回答

相關問題