SVG在其中获取当前动画进度（SMIL） <path> ：笔划破折号

Question

我正在使用非常简单的path元素动画。 动画适用于stroke-dashoffset属性。 我面临的问题是暂停动画后无法获得动画进度。 这是我的SVG代码和javascript，它们实际上除了暂停并开始动画外什么也不做：

 setTimeout(function(){ $('.svg')[0].pauseAnimations(); // get current stroke-dashoffset value ?? // $('#stroke')[0]['stroke-dashoffset'].animVal - it doesn't work $('.svg')[0].unpauseAnimations(); }, 500); // 500 is testing value (!) it can be anything 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" class="svg"> <path d="M47.488,10.079A40,40,0,0,0,16.302,71.551" id="stroke" style="stroke-width: 10px; fill: none; stroke: #333;" stroke-dasharray="83.07828521728516px 83.07828521728516px" stroke-dashoffset="-83.07828521728516px"> <animate attributeName="stroke-dashoffset" id="anim2" dur="1000ms" from="-83.07828521728516px" to="-39.095663631663605" fill="freeze"></animate> </path> </svg> 

我知道如何在使用<circle>元素时获得动画进度： https : stroke-dashoffset但我不知道如何在<path>获得stroke-dashoffset值。

我可以通过将超时与min / max stroke-dashoffset结合起来并计算大致进度来完成此工作，但是我相信（希望）我缺少了一些东西，可以使用animVal轻松animVal 。 因此，请勿发布此类解决方案的答案，因为我知道自己如何做。

Answer 1

非常有趣，我不知道所有可设置动画的属性都没有animVal ，但似乎stroke-dashoffset属性已直接转换为其等效样式。

因此，对于您的问题，一个简单的解决方案是请求元素的计算样式：

 setTimeout(function(){ $('.svg')[0].pauseAnimations(); // get current stroke-dashoffset value console.log( getComputedStyle($('#stroke')[0]).strokeDashoffset ); $('.svg')[0].unpauseAnimations(); }, 500); // 500 is testing value (!) it can be anything 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" class="svg"> <path d="M47.488,10.079A40,40,0,0,0,16.302,71.551" id="stroke" style="stroke-width: 10px; fill: none; stroke: #333;" stroke-dasharray="83.07828521728516px 83.07828521728516px" stroke-dashoffset="-83.07828521728516px"> <animate attributeName="stroke-dashoffset" id="anim2" dur="1000ms" from="-83.07828521728516px" to="-39.095663631663605" fill="freeze"></animate> </path> </svg>