我有一个使用clipPaths的简单SVG动画和使用TweenMax.js制作动画,它完全可以正常运行,但不能在IE9中运行。它似乎通过显示第一个小位开始动画,然后再做其他任何事情。
以下是代码:
SVG
<svg class="dial" xmlns="http://www.w3.org/2000/svg" viewBox="-249 373 95.6 95.9">
<clipPath id="a">
<path d="M-158.2 421.5s-.1 0 0 0c-.5-.1-.8-.1-1.2-.1-.3 0-.6 0-.9-.1h-1.7c-.1 0-.1 0-.2.1-.2.1-.7.2-1-.2-.2-.2-.1-.5.1-.7.2-.1.4-.1.6 0 .1 0 .2-.1.3-.1h.8c.3 0 .7.1 1.1 0h.1c.2 0 .5.1.8.1.3 0 .7 0 1.1.1.6-.1 1.1-.1 1.7-.1h.6c.2 0 1-.1 1.3-.1.6-.2.9-.1 1.1.1.1.1.2.4.1.5-.1.3-.4.4-.6.3h-.1c-.1 0-.2 0-.4.1h-.2s-.9 0-1.3.1H-158.2c.1 0 0 0 0 0zm-9.6-19.2c-.2 0-.4-.1-.5-.3-.1-.2 0-.5.3-.7.1-.1.2-.2.4-.3.3-.2.6-.4 1-.6l.4-.2c.1-.1.2-.1.3-.2.2-.1.4-.2.5-.4.1-.1.1-.1.2-.1.2 0 .6-.3.7-.5.6-.4 1.3-.8 2-1.1.6-.3 1-.6 1.3-.8.4-.3.6-.4.9-.3.2.1.3.2.3.4 0 .3-.2.5-.4.5 0 0-.1.1-.2.1-.3.2-.9.6-1.5.9-.7.3-1.3.7-1.8 1-.3.2-.7.6-1.1.7-.2.1-.3.2-.5.3-.1.1-.2.2-.4.3l-.5.3c-.4.2-.6.3-.9.5-.2.1-.3.2-.4.3s-.1.1-.1.2c.1 0 .1 0 0 0zm-52.5-14.2c-.3 0-.7-.4-1.8-2.2-.1-.3-.2-.5-.4-.8-.2-.3-.4-.7-.6-1.2-.5-.5-.8-1.1-1-1.9-.1-.1-.1-.2-.2-.3-.2-.3-.4-.7-.6-.8-.1-.1-.2-.2-.2-.3 0-.1-.1-.3-.1-.3l-.1-.1c-.2-.2-.2-.5.1-.7.1-.1.4-.2.5-.1.3.1.5.6.6.9.3.3.5.6.8 1 .1.1.1.2.2.3 0 0 0 .1.1.1.2.7.5 1.2.9 1.6.1.1.1.1.1.2.1.4.3.8.5 1.1.2.3.3.6.4.9.7 1.1 1 1.5 1.1 1.6.1 0 .3.2.3.3.1.3 0 .5-.3.6-.2.1-.2.1-.3.1zm-14.2 14.1h-.2c-.1 0-.1-.1-.2-.1-.1-.1-.3-.2-.4-.3-.4-.1-.7-.3-1.1-.5l-.4-.3c-.5-.2-1.1-.6-1.5-.9l-.5-.3c-.6-.4-1-.6-1.6-.8-.1 0-.1 0-.2-.1-.5-.4-1-.7-1.3-.9-.5-.3-.8-.5-.6-.9.1-.2.3-.4.5-.4s.3.1.4.2c.1 0 .2.1.3.2.3.3.7.5 1.3.9.6.2 1.2.5 1.7.8l.6.4c.4.3 1 .7 1.4.9l.4.2c.5.3.7.4.9.4s.3.1.4.2l.2.2c.5.3.3.7.3.7-.1.3-.2.4-.4.4zm-5.1 19.3c-.1 0-.2 0-.3-.1h-.3c-.4 0-1 0-1.7-.1-.8.1-1.4.1-2.2.1-.7.2-1.5.1-2.2 0-2.6.2-2.6 0-2.8-.3-.1-.2 0-.5.2-.6.2-.1.4-.1.5 0 .3 0 1 0 2-.1h.1c.6.1 1.3.1 1.9 0h.2c.8.1 1.3.1 2.1-.1h.2c.6.1 1.1.1 1.5.1.5 0 .7 0 .9.2.1.1.2.3.2.4.2.3-.1.5-.3.5zm-.5-.5zm-2 24.1c-.2 0-.4-.1-.5-.4-.1-.4.2-.6.9-1 .3-.2.7-.4 1-.6.5-.2.8-.4 1.1-.6.3-.2.5-.3.8-.4.8-.4 1.4-.8 1.9-1.2.4-.2 1-.5 1.5-.8.1-.1.2-.1.3-.2.1-.1.2-.2.4-.2.3 0 .5.2.5.4s0 .5-.4.6c0 0-.1 0-.2.1 0 0-.1 0-.1.1-.4.2-.9.4-1.4.7-.5.4-1.1.9-2 1.3-.2.1-.4.2-.7.4s-.7.4-1.2.6c-.3.2-.7.5-1 .6-.2.1-.4.2-.5.3 0 .2-.1.2-.2.3h-.2zm7-4.9zm10.2 22.4c-.2 0-.3-.1-.4-.2-.2-.2-.1-.5.1-.7 0 0 .2-.2.4-.5.1-.4.4-.9.6-1.5.1-.2.2-.3.3-.5.2-.4.5-.9.9-1.3l.3-.6c.2-.4.4-.8.5-1.2 0-.1.1-.1.1-.2.4-.5.6-.8.9-1.3 0-.1.1-.2.2-.2s.1 0 .1-.1 0-.1.1-.2c.1-.3.4-.4.7-.3.2.1.4.4.3.6 0 .2-.1.5-.5.8-.2.4-.4.8-.8 1.3-.1.5-.4.9-.6 1.3l-.3.6s0 .1-.1.1c-.3.4-.6.9-.8 1.3-.1.2-.2.4-.3.5-.2.5-.5 1.1-.5 1.3v.1c-.3.6-.7.8-.7.9h-.5zm23.9 6.3c-.1 0-.2 0-.3-.1-.4-.3-.4-.6-.4-1.2-.1-.2-.1-.5 0-.7v-.4c-.1-.1-.1-.2-.1-.4.1-.5 0-.9 0-1.4 0-.3-.1-.7 0-1.1.2-.7.2-1.1 0-1.9v-.2c.1-.5.1-1 .1-1.4.1-.9.1-1.1.4-1.2.2-.1.4 0 .5.1.2.2.2.4.1.6v.6c0 .4-.1.9-.1 1.4.3.9.2 1.5 0 2.3v.8c0 .4.1.9 0 1.4.2.3.1.7.1.9v.2c.1.1.1.1.1.2v.5c.2.2.2.5 0 .7-.1.2-.2.3-.4.3zm23.6-6.4h-.2c-.2-.1-.3-.2-.6-.9-.1-.1-.2-.3-.4-.5s-.3-.5-.6-.8c-.1-.1-.1-.2-.1-.3 0-.4-.3-.8-.6-1.2-.1-.1-.2-.3-.2-.4-.2-.3-.3-.6-.5-.8-.2-.4-.4-.7-.6-1.1-.3-.6-.6-.9-.8-1.2-.2-.3-.5-.8-.3-1.1.1-.2.3-.3.5-.4.3 0 .5.2.6.4 0 .1 0 .2-.1.3 0 0 .1.1.1.2.3.3.6.7.9 1.4.2.4.4.7.6 1 .2.3.3.5.5.9.1.1.1.2.2.4.3.4.6.9.7 1.5.2.3.4.6.6.8.1.2.2.4.3.4 0 0 .1.1.1.2.1.3.2.5.2.5.1.1.2.4.1.6 0 0-.2.1-.4.1zm17.3-17.3c-.1 0-.1 0 0 0-.2 0-.4-.1-.5-.3h-.1c-.1 0-.2-.1-.3-.1-.4-.3-.9-.7-1.4-.9l-.6-.3c-.4-.2-.8-.4-1.3-.8-.5-.1-.9-.4-1.4-.6-.2-.1-.3-.2-.5-.3-.2-.1-.3-.2-.4-.3-.3-.2-.5-.4-.8-.5-.1 0-.1-.1-.2-.1-.1-.1-.2-.2-.3-.2-.2-.1-.4-.4-.3-.6.1-.2.3-.4.5-.4s.3.1.4.2c.1 0 .2.1.3.2.4.2.7.4 1.1.7.1.1.2.2.3.2s.3.1.5.2c.5.3.9.4 1.3.6.1 0 .1 0 .2.1.4.4.8.6 1.2.8.2.1.5.2.6.4.5.2 1 .6 1.5.9.5.1.8.4.7.8-.1.1-.3.3-.5.3zm2-28.6c-.6 0-1.2 0-1.9.2-.4.1-.9.1-1.3.1h-.7c-.4.2-.8.3-1 .3l-.1.2c-.1 0-.3-.1-.3-.2 0-.2.1-.3.2-.4h.1c.2 0 .5-.1.9-.3h2.1c.7-.3 1.4-.3 2-.3m-.6-4c-.5.2-1.4.3-2.1.3l-.2.1c-.5.1-1.1.3-1.4.4-.2.1-.6.3-.9.3-.1 0-.2 0-.3-.1s-.1-.2-.1-.3c0-.2.2-.2.3-.3h.2c.1 0 .3-.1.4-.1.4-.2 1-.4 1.6-.5l.4-.1c.6 0 1.5-.1 2-.3m-1-3.7c-.4 0-.7.1-1 .2s-.7.2-1.1.2c-.4.3-1 .5-1.3.5-.2 0-.3.1-.4.1-.2.1-.3.1-.4.1-.2.3-.4.3-.6.3-.1 0-.2 0-.3-.1s-.1-.3 0-.4c.1-.1.2-.2.4-.1.1 0 .2-.1.3-.1.1 0 .3-.1.4-.1.1-.1.3-.1.5-.1.4-.1.8-.2 1.2-.5.1 0 .1-.1.2-.1.4 0 .7-.1 1-.2.3-.1.6-.2 1-.2h.1m-1.6-3.8c-.3.1-.6.2-.9.4-.3.2-.7.4-1.2.5-.4.2-.8.5-1.4.7l-.1.1c-.1 0-.3.1-.3.1-.3.1-.5.1-.6.1h-.2c-.1 0-.2-.1-.2-.2-.1-.2 0-.3.2-.4.1 0 .2 0 .3.1.1 0 .2-.1.3-.1s.2-.1.3-.1l.2-.1c.5-.3 1-.5 1.4-.7.5-.1.8-.3 1.1-.5.3-.2.6-.3 1-.4m-4.5-7.4c-.2.2-.5.4-.8.6s-.6.4-.9.7c-.2.1-.3.3-.5.4-.4.3-.8.6-1.1.8-.4.3-.6.4-.7.5h-.1c-.1 0-.2-.1-.3-.1-.1-.1 0-.3.1-.4s.3-.2.6-.5c0 0 .1 0 .1-.1.3-.2.7-.5 1.1-.8.2-.1.3-.3.5-.4.3-.2.6-.5.9-.7.3-.2.5-.4.8-.6m-2.5-2.8c-.2.2-.3.3-.5.4-.4.3-.7.6-1.2.8-.3.5-.6.9-1 1.2l-.3.3c.1-.1-.4.4-.8.4h-.1l.1-.3.2-.2-.2.2-.1-.3c.1 0 .3-.1.6-.4l.3-.3c.4-.3.7-.6.9-1.1 0-.1.1-.1.1-.1.5-.3.8-.5 1.2-.8.1-.1.3-.2.5-.3m-2.7-2.9c-.3.5-.8 1.1-1.3 1.5l-1.3 1.3c-.5.7-.8.9-1 .9h-.1c-.2-.1-.2-.2-.2-.4 0-.1.2-.2.3-.2.1-.1.2-.2.4-.6 0 0 0-.1.1-.1.2-.2.9-.8 1.3-1.3.5-.5 1-1 1.3-1.5m-3.1-2.4c0 .1-.1.2-.2.4-.3.5-.5.9-.9 1.2l-.6.9c-.2.3-.4.5-.5.7-.4.5-.6.7-.6.8-.1 0-.2.1-.4.1-.2-.1-.3-.2-.3-.4.1-.2.2-.4.7-.9.1-.2.3-.4.5-.7l.6-.9.1-.1c.3-.3.5-.6.8-1.1.1-.1.2-.3.3-.4m-29.5-7.9c0 .3.1.6.2 1 .1.3.1.6.2 1v.1c-.1.4 0 .8.1 1.2-.1.2-.1.4-.1.6 0 .4.1.6.1.7s.1.2.1.3c0 .2-.1.3-.3.3.1 0 0 0 0 0-.1 0-.3-.1-.3-.2v-.1c-.1-.2-.2-.5-.2-1 0-.1 0-.3-.1-.6-.1-.4-.1-.9-.1-1.3 0-.3-.1-.6-.1-.9 0-.4-.1-.7-.1-1.1m-4 .3v.3c.2.6.4 1.5.5 2 0 .2.1.3.1.5.1.5.2 1.1.2 1.5.1.3.2.5.2.6v.1c.1.2 0 .3-.2.4h.1c-.1 0-.2-.1-.3-.3 0-.1-.1-.3-.3-.6v-.2c0-.4-.1-.9-.2-1.4-.1-.1-.1-.3-.1-.5-.1-.5-.3-1.3-.5-1.9v-.1-.4m-3.8 1.3c.2.4.3.8.5 1.2.1.3.2.5.3.8.1.2.1.4.1.5.1.6.3 1 .5 1.5v.1c0 .2.1.4.1.5l.1.1c.1.1 0 .3-.1.4-.1.2-.1.2-.2.2h-.2c-.1 0-.2-.1-.3-.9-.3-.5-.4-1-.6-1.6 0-.2-.1-.3-.1-.5-.1-.3-.2-.5-.3-.8-.1-.4-.3-.8-.4-1.2v-.1m1.8 4.5zm-5.4-2.9c.1.2.1.3.2.5.1.4.3 1 .6 1.4.2.7.5 1.4.7 1.8.4.9.4 1 .2 1.1h-.1c-.1 0-.3-.1-.3-.2v-.1c-.1-.1-.2-.4-.3-.6-.2-.4-.4-1.2-.7-1.8-.3-.4-.5-1-.6-1.4-.1-.2-.1-.3-.2-.4m-7.4 4.3l.6.9c.2.2.4.5.5.7l.6.9s.3.5.5.7c.2.3.3.5.4.5.1 0 .2.1.2.1.1.1.1.3-.1.4h-.1c-.3 0-.6-.4-.8-.8-.2-.2-.3-.5-.5-.7l-.6-.9c-.1-.2-.3-.4-.5-.6-.2-.3-.5-.6-.6-.9m-3.1 2.3c.2.3.4.6.7.9.2.2.3.4.5.6.5.5 1 1 1.3 1.6.2.2.3.3.3.4h.1c.1.1.1.3 0 .4.1.2 0 .3-.1.3-.2 0-.2-.1-.3-.2-.1-.1-.2-.2-.3-.4l-.1-.1c-.3-.6-.8-1.1-1.3-1.5-.2-.2-.4-.4-.5-.6-.3-.3-.5-.6-.7-.9m-2.8 3c.3.1.6.4.9.7.2.2.3.3.5.4 1 .8 1.3 1.2 1.4 1.4.3.2.5.3.6.4.1.1.2.1.3.2.1.1 0 .3-.1.4l-.2.1c-.1 0-.2 0-.2-.1-.2-.1-.4-.2-.8-.5l-.1-.1c0-.1-.2-.5-1.3-1.3-.2-.1-.3-.3-.5-.5s-.6-.6-.7-.6c-.1 0-.2-.1-.2-.1m-3 2.8c.1.1.2.3.4.4.2.1.4.2.6.4.3.2.7.5.9.6 0 0 .1 0 .1.1.6.5 1.3.9 1.6 1.3.9.4.8.6.8.8 0-.2-.1-.1-.2-.1h-.1c-.1 0-.1-.1-.2-.1-.1-.1-.3-.2-.5-.2l-.1-.1c-.3-.4-.9-.8-1.5-1.2-.4-.1-.8-.4-1.1-.7-.2-.2-.4-.3-.5-.4m-4.4 7.1c.3 0 .6.2.9.3.2.1.5.2.8.3.6.3 1.2.6 2 .8.2.1.4.2.5.3.1 0 .1 0 .2.1s.2.3.1.4c0 .2-.1.3-.2.3s-.4-.1-.8-.3c-.7-.2-1.4-.5-1.9-.8-.3-.1-.6-.2-.9-.4-.3-.1-.6-.2-.8-.3-.1 0-.1 0-.2-.1m-1.3 3.7c.3 0 .6.1.9.2.3.1.7.2 1.1.3.3.1.5.2.7.3.4.2.8.3.9.4.3.1.6.2.8.3.2.1.4.1.4.3 0 .1-.1.2-.3.3.1 0 .1 0 0 0H-238.1c-.2-.1-.5-.1-.8-.3-.2 0-.5-.2-1-.4l-.6-.3c-.4-.1-.8-.2-1.1-.3-.3-.1-.6-.2-.8-.2h-.1m-1.6 3.6c.2 0 .4 0 .8.2.1 0 .3 0 .4.1.4.1.9.1 1.4.3.3.1.6.1.9.1.4 0 .8 0 1.1.2.7.1.9.3.9.5v.3c-.2.1-.3.1-.3.1-.1 0-.1 0-.2-.1l-.1-.1c-.1 0-.2-.1-.5-.1h-.1c-.2-.1-.5-.1-.8-.2-.3 0-.7 0-1-.2-.5-.2-.9-.2-1.3-.3-.2 0-.3-.1-.5-.1h-.1c-.3-.1-.4-.1-.6-.1m-.3 4.2c.9 0 1.6.1 2.1.1.6 0 1.2.1 1.6.2.1 0 .2 0 .3.1.5-.1 1 0 1.1.2.1.1.1.2 0 .3h-.2s-.1 0 0 0h-.2c-.1 0-.3-.1-.6 0h-.1c-.1 0-.2 0-.4-.1-.4-.1-1-.2-1.6-.2-.5-.1-1.2-.1-2.1-.1h-.2m.5 8.4c.5.1 1.3-.1 1.9-.3h.2c.4.1.7 0 1 0 .3 0 .6-.1.9 0 .3-.2.6-.3.7-.3h.2c.1 0 .2.1.2.3 0 .1-.1.3-.3.3-.1 0-.4.1-.7.3-.1 0-.1.1-.2 0-.3-.1-.6 0-.9 0s-.7.1-1.1 0c-.7.2-1.4.3-2 .3m.6 3.9h.2c.2 0 .3-.1.6-.1.3-.1.8-.2 1.3-.3.6-.3 1.4-.3 1.8-.3.3-.1.5-.2.6-.3.1-.1.2-.1.3 0 .1.1.1.2.1.3 0 .1-.1.1-.2.2-.3.2-.8.3-.9.3-.5 0-1.1.1-1.6.3h-.1c-.6.1-1 .2-1.3.3-.2.1-.4.1-.6.1h-.3m.8 4c.1 0 .2-.1.5-.3h.1c.5-.1.9-.2 1.3-.3.2-.1.3-.1.5-.2.3-.1.6-.2.8-.3.4-.1.8-.2.9-.3.3-.2.6-.3.8-.3.1-.1.2-.2.3-.1.1 0 .3.2.3.3 0 .2-.2.3-.4.4-.2.1-.4.2-.7.3-.2.1-.6.3-1.1.4-.3.1-.5.2-.8.3-.2.1-.3.1-.5.2-.4.1-.8.3-1.3.3m1.5 3.6c.1 0 .3-.1.4-.2.4-.2.9-.4 1.4-.5l.6-.3c.5-.3.9-.5 1.2-.6.3-.2.6-.3.8-.4h.1c.1 0 .1-.1.2-.1.2 0 .3.2.3.3 0 .2-.2.3-.4.3-.2.1-.4.1-.6.3-.1 0-.1.1-.2.1-.2 0-.6.3-1 .5-.2.1-.4.3-.7.4h-.1c-.4.1-.9.3-1.3.5-.2.1-.3.1-.4.2m4.1 7.5c.4-.3 1.1-.8 1.6-1.1.5-.5 1.1-.9 1.5-1.2.4-.2.7-.4.7-.5.1-.2.2-.2.4-.2.2.1.2.2.2.4-.1.4-.5.6-1 .9-.4.2-.9.7-1.5 1.2-.6.4-1.3.8-1.6 1.1m2.5 2.9l.1-.1c.3-.1.5-.3.8-.5.2-.1.4-.3.6-.4.3-.3.6-.5.8-.8.3-.2.5-.4.6-.6l.4-.4c.1-.1.3-.3.5-.2.1 0 .2.2.2.3s-.1.3-.2.3l-.4.4c-.1.2-.4.4-.7.7l-.8.8-.1.1c-.2.1-.4.3-.5.4-.3.2-.5.4-.9.6m2.8 2.7l.4-.4c.3-.3.6-.6.9-1 .4-.6 1-1.2 1.4-1.5.3-.4.4-.6.5-.7 0-.1.1-.2.2-.2.2 0 .3 0 .4.2.1.2 0 .3-.7 1.1-.4.3-.9.8-1.3 1.4-.3.5-.7.8-1 1.1l-.4.4m2.9 2.7l.1-.3s0-.1.1-.1c.4-.4.8-.9 1.2-1.5.6-.7.9-1 1.1-1.6.1-.2.6-1 1-.9.2 0 .3.2.3.3 0 .1-.1.2-.2.3-.1 0-.3.2-.5.6-.2.6-.5 1-1.2 1.7-.3.5-.7 1.1-1.2 1.5l-.1.2m7.2 4.1c0-.1 0-.1.1-.1.2-.2.3-.5.5-.8.1-.2.2-.5.4-.7.3-.8.6-1.3 1-1.8 0-.3.1-.5.1-.6v-.2c.1-.1.3-.2.4-.1.2.1.2.4.1.5 0 .1-.1.3-.1.6 0 .1 0 .1-.1.2-.4.4-.6.9-.9 1.7-.2.3-.3.5-.4.7m1.2-3.4zm2.3 5.8c0-.1.1-.3.2-.6.1-.4.3-.8.4-1.2l.1-.4c.2-.5.4-1.1.4-1.5v-.1c.3-.6.3-.6.3-.7 0-.2.1-.3.2-.3.2 0 .3.1.3.2 0 .3 0 .5-.3 1.1-.1.5-.3 1.1-.4 1.6l-.1.3c-.1.5-.3.9-.4 1.3-.1.2-.1.4-.2.5m3.6.9c.1-.5.2-1.1.3-1.9v-.2c.4-.7.6-1.3.6-1.8 0-.2 0-.4.1-.5 0-.4.1-.6.3-.6.1 0 .3 0 .3.1.1.1.1.2 0 .3v.2c0 .2 0 .3-.1.5 0 .6-.2 1.2-.6 2-.1.8-.2 1.5-.3 2m3.9.5v-.1c.1-.2.1-.5.2-.9 0-.3.1-.6.1-.8.1-.4.1-.8.1-1.1 0-.3 0-.6.1-.9v-.3c.1-.6.1-.7.3-.7.1 0 .3.1.3.2v1.6c0 .3 0 .7-.1 1.2-.1.3-.1.5-.1.8 0 .4-.1.7-.2 1m8.3-.8c0-.3-.1-.6-.2-.9v-.3c0-.6 0-1.1-.3-1.4-.1-.1-.1-.2-.1-.3.1-.2.1-.4.1-.6 0-.2.1-.5.3-.7.1-.1.3-.1.4.1.1.1.1.3-.1.4v.2c0 .1 0 .3-.1.6.3.4.3 1 .3 1.6v.3c.1.3.1.6.2.9.1.3.1.7.2 1m3.8-.7c.1-.5 0-.9-.1-1.4 0-.2-.1-.4-.1-.7-.2-.4-.4-1.1-.4-1.7-.1-.2-.2-.4-.2-.6v-.1l-.1-.1c-.1-.1 0-.3.1-.4.1 0 .2-.1.3 0 .2.1.2.2.3.5.1.2.1.4.2.6v.2c-.1.5.2 1.2.3 1.5v.1c0 .3.1.5.1.7.1.5.2 1 .1 1.6m4.2-1.2c0-.2-.1-.4-.3-.6-.2-.4-.4-.9-.5-1.3l-.3-.6c-.2-.4-.3-.8-.4-1.2-.3-.9-.3-1.1 0-1.2.1-.1.3 0 .4.1s.1.2 0 .3c0 .1.1.3.2.6.1.4.2.8.4 1.2.1.2.2.4.3.7v.1c0 .3.2.8.4 1.1.1.3.3.5.3.7m3.6-1.3c-.2-.3-.3-.7-.5-1.1-.1-.3-.2-.5-.3-.8-.1-.3-.2-.5-.3-.7-.2-.4-.5-.8-.6-1.4-.1-.3-.2-.6-.2-.7v-.1c0-.1 0-.2.1-.3.1-.1.2-.1.3-.1.1 0 .1.1.2.2.1.2.2.6.3.8.1.4.3.8.5 1.2.1.2.3.5.4.7.1.3.2.6.3.8.1.3.2.7.4.9m7.3-4.1c-.1-.2-.3-.6-.6-.9-.2-.3-.4-.5-.5-.8-.4-.3-.6-.7-.8-1-.1-.2-.3-.5-.4-.6l-.1-.1c-.1-.3-.3-.4-.3-.4-.2-.1-.2-.2-.2-.4.1-.2.2-.2.4-.2.3.1.5.4.6.7.2.2.3.4.5.7s.4.7.7.9l.1.1c.1.2.3.5.5.8.2.3.5.6.6.9m2.9-2.5l-.1-.1c-.1-.2-.3-.5-.5-.7-.2-.2-.4-.5-.6-.8-.5-.4-1.1-1-1.5-1.4-.4-.3-.6-.7-.5-.9 0-.2.2-.3.3-.3.2 0 .3.1.3.3v.2s.1.2.3.3l.1.1c.4.4 1 1.1 1.5 1.4l.1.1c.2.3.4.5.6.8.2.3.4.5.5.8m2.9-3c-.1-.2-.8-1-1.5-1.4-.4-.2-.6-.5-.9-.8l-.6-.6c-.2-.1-.4-.3-.5-.4-.1 0-.1-.1-.1-.2s0-.3.1-.4.3 0 .4.1c.1.1.2.2.4.3.3.2.5.5.7.7.2.3.5.5.7.6.7.4 1.4 1.1 1.7 1.5m2.3-2.8c-.3-.4-.7-.7-1.3-1l-.3-.2c-.2-.1-.5-.3-.7-.5-.3-.2-.6-.4-.8-.4-.1 0-.1 0-.2-.1l-.4-.4c.1-.2.1-.3 0-.3s-.2-.1-.2-.3c0-.2.1-.3.3-.3.3 0 .3.1.5.3l.3.3c.3.1.6.3.9.5.2.2.4.3.6.4l.3.2c.5.4.9.7 1.3 1.1m4.4-7.4c-.1 0-.4-.1-.8-.3-.3-.1-.7-.3-1-.4 0 0-.1 0-.1-.1-.2-.2-.5-.3-.8-.4-.3-.1-.5-.2-.7-.4-.4-.1-.6-.2-.7-.2s-.1-.1-.1-.1c-.1.1-.3.1-.4-.1-.1-.1 0-.3.1-.4.3-.2.5-.1.7 0 .1.1.3.1.7.2 0 0 .1 0 .1.1.1.1.4.2.6.3.3.1.6.3.9.5.3.1.7.2 1 .4.3.1.6.2.7.3m1.3-3.5c-.5-.2-.9-.4-1.5-.5h-.1c-.4-.2-.7-.3-1.1-.4l-.9-.3c-.3 0-.8 0-.9-.2-.1-.1 0-.2 0-.3.1-.1.3-.1.4-.1h.7l.9.3c.3.1.7.2 1.1.4.7.1 1.1.3 1.6.5m1.3-3.7c-.4-.1-1.2-.3-2-.4-.7 0-1.5-.2-1.9-.4h-.7c-.1.1-.2.2-.4.1-.1-.1-.2-.3-.1-.4.2-.3.6-.3 1.1-.3H-162.4c.3.2 1 .4 1.7.4.9.1 1.6.3 2 .4m.5-3.9c-.4 0-1.3-.1-1.6-.2-.6 0-1.2-.1-1.6-.2-.2 0-.3-.1-.5-.1-.4-.1-.7 0-.8 0-.1.1-.2.1-.3 0s-.2-.2-.1-.4c.1-.3 1-.3 1.4-.2.2 0 .3.1.5.1.5.1 1 .2 1.6.2h.1c.3.1 1.2.2 1.5.2h.1"/>
</clipPath>
<path d="M-201.7 377.9c.1 0 .2-.1.3-.1 1.1-.4 1.5-1 2.9-1 1.6 0 3.3.5 4.9.9 2.7.7 5.6 1.5 8.2 2.7 5.4 2.5 10.3 6 15.2 9.5 1.7 1.3 3.5 2.6 4.7 4.4.7 1.1 1.1 2.3 1.6 3.5 1.9 5.4 3.4 11 4.6 16.7.4 2 .8 4 .8 6 0 2.1-.3 4.2-.7 6.3-2 9.3-6.5 18-13.2 24.7s-15.7 11.1-25.1 12.1c-2.3.2-4.7.3-7 .1-3.5-.3-6.9-1-10.2-2.2-8-2.8-14.9-8.3-19.9-15.1s-8.3-14.8-9.9-23.1c-.3-1.7-.6-3.4-.4-5.1.1-1.6.6-3.2 1.1-4.8 1.5-4.8 2.9-9.7 5.5-14 1.8-3 4.1-5.8 6.7-8.2 4.1-3.8 8.8-6.9 13.9-9.2 2.6-1.2 5.3-2.1 8.1-2.8 2.4-.7 5.4-.6 7.9-1.3z" clip-path="url(#a)" fill="none" stroke="#000" stroke-width="12" stroke-miterlimit="10"/>
<clipPath id="b">
<path d="M-182 388h-.1c-.2 0-.3-.2-.4-.4-.1-.3.2-.5.3-.6.1-.1.2-.1.3-.2.1-.4.3-.7.5-1 .1-.1.1-.2.2-.4.2-.3.3-.5.4-.8.2-.4.4-.7.7-1.2.5-.6.8-1.2 1-1.6 1.1-2.2 1.5-2.2 1.6-2.2.2 0 .4.1.4.2.1.2.1.5-.1.6-.1.2-.6.8-1.1 1.8-.2.5-.6 1.1-1.1 1.8-.2.4-.4.8-.6 1.1-.1.3-.3.5-.4.8-.1.1-.2.3-.2.4-.2.3-.4.6-.4.9 0 .1-.1.1-.1.2l-.4.4c-.1.2-.3.2-.5.2zm-19.5-5.2c-.1-.1-.2-.3-.2-.5v-.3c-.1-.1-.1-.2 0-.4.1-.4.1-1 0-1.5V378c.1-.5.1-.9 0-1.3v-1.6-1.4c-.1-.2-.1-.3 0-.5.2-.2.5-.3.7-.1.3.2.3.4.3 2v1.6c0 .5 0 .9-.1 1.4v2c.1.6.1 1.2 0 1.7.1.3 0 .5 0 .6h-.5l-.2.4zm15.8 4.9c-.1 0-.2-.1-.3-.1s-.1-.2 0-.3v-.1c0-.3.1-.6.2-1v-.2c.3-1.5.6-3 .8-4.6.2-.9.3-1.8.4-2.7-.1.2-.3.3-.4.5l-.3.3-.9 1.2c-.2.3-.4.5-.6.8l-.9 1c-.3.2-.4.2-.5.1-.2-.1-.3-.4-.3-.6 0-.2-.1-.3-.1-.4 0 .1-.1.3-.4.4-.1 0-.3 0-.3-.1-.2-.2-.2-.6-.2-.8v-.1-.3c-.1.1-.1.2-.2.2l-.3.3s-.2.1-.3.1c-.1 0-.2-.1-.2-.3 0-.3.1-.6.1-.9 0-.1 0-.2.1-.3 0-.1 0-.2.1-.3v-.1l-.1.1-.6.9c-.3.4-.5.9-.8 1.3-.1.2-.3.5-.4.7l-.3.5c-.1.1-.3.2-.4.1-.1-.1-.2-.3-.1-.4v-.1-.4-.2-.4c0-.4.1-.8.2-1.2 0-.2.1-.4.1-.6l.1-.7c.1-.5.1-.9.2-1.4 0 .1-.1.1-.1.2l-1.8 2.7-.2.3c-.1.1-.2.2-.4.1-.1-.1-.2-.2-.2-.3v-.6-.2s0-.2-.1-.3c-.1-.4-.1-.8-.1-1.2v-.4c-.1.2-.3.4-.4.6l-.3.6c-.1.1-.1.1-.2.1s-.2 0-.3-.1c-.6-.1-.9-.1-1.2-.2-1-.2-2-.4-3.1-.3-.2 0-.3-.1-.3-.3s.1-.3.3-.3c1.1 0 2.1.1 3.2.3.3.1.7.1 1 .3.1-.1.1-.2.2-.3.2-.3.3-.5.4-.7.1-.2.2-.4.3-.5l.1-.2c.1-.1.3-.2.4-.1.2.1.2.4.2.6 0 .3 0 .6.1.9 0 .4.1.8.1 1.1V379.7c.5-.7 1-1.5 1.5-2.2.1-.2.3-.4.5-.7l.2-.3c0-.1.2-.2.3-.2.1 0 .3.1.3.3v.7l-.3 1.8-.1.7c0 .2-.1.4-.1.6-.1.4-.1.7-.2 1.1 0-.1.1-.1.1-.2.3-.4.5-.9.8-1.3.2-.3.4-.6.7-.9l.3-.3c.1-.1.2-.2.2-.3l.1-.1c.1-.1.1-.2.2-.2.1-.1.2-.1.3 0 .1 0 .2.2.2.3 0 .4-.1.8-.2 1.1 0 .1 0 .2-.1.3l.3-.3c.1-.1.2-.1.3-.1.1 0 .2.1.2.2v1.2c.1-.2.2-.3.3-.5.1-.1.2-.1.3-.1s.2.1.2.2c.4.2.4.4.4.5v.1c0 .2.1.4.1.6v.1l.2-.2.6-.6c.2-.2.4-.5.6-.7.3-.4.6-.8 1-1.2l.3-.3c.4-.4.8-.8 1-1.3.1-.1.2-.2.3-.2s.2.1.3.3v.6c-.1 1.1-.3 2.3-.5 3.4-.2 1.4-.5 2.8-.8 4.2 0 0 0-.1.1-.1.2-.3.3-.6.5-.9.3-.5.7-1.1 1.2-1.8l.1-.1c.1-.2.3-.3.4-.5-.1-.4.1-.5.2-.4.1 0 .2.1.2.3v.4c0 .3-.1.7-.2 1.1.1-.2.3-.4.4-.5l.1-.2c0-.1.1-.1.2-.1s.2 0 .2.1c.1.1.2.2.2.3s.1.2.2.3h.1l.2.1c.1 0 .2.1.2.1.2 0 .3.1.3.2s-.1.3-.2.3c-.2 0-.5-.1-.6-.2-.1 0-.1-.1-.2-.1-.2 0-.2-.1-.3-.2l-.2-.2c-.3.5-.7.9-1 1.4-.1.1-.2.1-.3.1s-.2-.1-.2-.2c0-.2 0-.4.1-.7l.1-.8v-.1c-.4.5-.7 1-1 1.4-.2.3-.3.6-.5.9-.2.3-.4.7-.6 1 0 .1-.1.1-.1.2-.1.1-.1.2-.2.2 0 .1 0 .2-.1.2.1.3 0 .4-.1.4z"/>
</clipPath>
<path d="M-201.7 377.9c.1 0 .2-.1.3-.1 1.1-.4 1.5-1 2.9-1 1.6 0 3.3.5 4.9.9 2.7.7 5.6 1.5 8.2 2.7 5.4 2.5 10.3 6 15.2 9.5 1.7 1.3 3.5 2.6 4.7 4.4.7 1.1 1.1 2.3 1.6 3.5 1.9 5.4 3.4 11 4.6 16.7.4 2 .8 4 .8 6 0 2.1-.3 4.2-.7 6.3-2 9.3-6.5 18-13.2 24.7s-15.7 11.1-25.1 12.1c-2.3.2-4.7.3-7 .1-3.5-.3-6.9-1-10.2-2.2-8-2.8-14.9-8.3-19.9-15.1s-8.3-14.8-9.9-23.1c-.3-1.7-.6-3.4-.4-5.1.1-1.6.6-3.2 1.1-4.8 1.5-4.8 2.9-9.7 5.5-14 1.8-3 4.1-5.8 6.7-8.2 4.1-3.8 8.8-6.9 13.9-9.2 2.6-1.2 5.3-2.1 8.1-2.8 2.4-.7 5.4-.6 7.9-1.3z" clip-path="url(#b)" fill="none" stroke="#AE5D24" stroke-width="12" stroke-miterlimit="10"/>
</svg>
CSS
svg {
height: 400px;
}
的JavaScript
$(document).ready(function() {
// Store a reference to our paths, excluding our clip path
var paths = $('path:not(clipPath path)');
// For each path, set the stroke-dasharray and stroke-dashoffset
// equal to the path's total length, hence rendering it invisible
paths.each(function(i, e) {
e.style.strokeDasharray = e.style.strokeDashoffset = e.getTotalLength();
});
// Create a timeline for ease of manipulation and the possibility
// to play the animation back and forth at the requested speed.
var tl = new TimelineMax();
// Add each separate line animation to the timeline, animating the
// stroke-dashoffset to 0. Use the duration, delay and easing to
// achieve the perfect animation.
tl.add([
TweenLite.to(paths.eq(1), 1, {strokeDashoffset: 0, delay: 1}),
TweenLite.to(paths.eq(0), 2, {strokeDashoffset: 0, delay: 1})
]);
});
这是一个正在运行的代码的JSFiddle:
https://jsfiddle.net/wo3j305r/
你可以在Chrome中加载这个JS Fiddle,它可以很好地工作但是在IE9中加载它并不起作用。从我所看到的,也没有任何JS错误,所以我完全被难倒。
这是我第一次使用TweenMax为SVG制作动画,所以任何帮助都会很棒!
干杯, 路加。