使用 jquery/javascript 的 SVG 路径动画答案

【问题标题】：SVG path animation using jquery/javascript使用 jquery/javascript 的 SVG 路径动画
【发布时间】：2013-02-20 17:38:46
【问题描述】：

我已经通过 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

您能否提供任何解决方案来为折线图制作动画路径？（即）折线图的路径动画

谢谢，

湿婆

【问题讨论】：

标签： jquery html svg jquery-svg

【解决方案1】：

对于这种效果，您可以定义一个矩形 clipPath，为该矩形设置动画，并将其用作路径的 clip-path。

像这样：

<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>

【讨论】：