Question

我有一个简单的路径，用from="0%" to="100%"动画，但只显示路径的一部分。如何从开始到结束的动画制作动画？

<svg>
    <path d="M100,100 S150,100 200,150 S150,150 100,200 S100,200 100,300 S200,300 300,300 S200,300 100,200 S100,200 100,300 S200,300 300,300 S315,300 330,200" stroke="black" stroke-width="1" fill="none" stroke-dasharray="100000,100000" id="foo">
        <animate xlink:href="#foo" attributeName="stroke-dasharray" dur="1s" fill="freeze" from="0%" to="100%"></animate>
    </path>
</svg>

http://jsfiddle.net/8g2k2cy4/

Answer 1

好的，找到了解决方法，也许有更好的方法......

因此svg path元素有一个返回路径长度的.getTotalLength();方法。这样我就可以通过JavaScript在animate元素中应用/使用它，如：

var animEl = document.querySelector('animate');
animEl.setAttribute('to', animEl.parentNode.getTotalLength());

http://jsfiddle.net/8g2k2cy4/1/

svg路径动画整个整个路径

1 个答案: