使用jQuery的SVG路徑動畫/ javascript

Question

我已經通過jQuery創建了HTML 5 SVG折線圖。請參考下面的截圖。

請參考下面的SVG路徑：

<path id="John" clip-path="url(&quot;#ChartAreaClip&quot;)" fill="none" stroke="red" stroke-width="3" d="M 136 213.6 L 202 259.36 M 202 259.36 L 268 222.18 M 268 222.18 L 334 159.26 M 334 159.26 L 400 150.68 M 400 150.68 L 466 79.18 M 466 79.18 L 532 170.7 M 532 170.7 L 598 167.84 M 598 167.84 L 664 99.2"/> 

我要執行的路徑動畫（即）線是畫像運動的影響。像下面的鏈接

http://www.highcharts.com/demo/

我也提到了下面的鏈接，但不能得到的想法。

https://developer.mozilla.org/en-US/docs/SVG/Element/animateMotion

https://developer.mozilla.org/en-US/docs/SVG/Element/animateColor

https://developer.mozilla.org/en-US/docs/SVG/Element/animate

可以請你提供任何解決方案，以折線圖動畫路徑？ （即）路徑動畫線圖表

謝謝，

希瓦

Answer 1

對於這種效果可以定義一個矩形clipPath，動態顯示矩形，並使用它的路徑的剪輯路徑。

像這樣：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <defs> 
     <clipPath id="curtainClip"> 
      <rect id="clipRect" x="0" y="0" width="100" height="100"/> 
     </clipPath> 
    </defs> 

    <animate xlink:href="#clipRect" 
     attributeName="width" 
     dur="1s" 
     from="0" 
     to="100" /> 

    <path clip-path="url(#curtainClip)" stroke="red" d="M 0 0 L 100 100"/> 
</svg>