SVG 在 <path> 中获取当前动画进度 (SMIL)：stroke-dashoffset

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> 元素时获得动画进度：但我不知道如何在 <path> 中获得 stroke-dashoffset 值。

我可以通过将超时与 min/max stroke-dashoffset 相结合来完成它并计算大概的进度，但我相信（希望）我遗漏了一些东西并且可以通过 [=19= 轻松完成]. 所以请不要 post 那种解决方案的答案，因为我知道如何自己做。

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>

SVG 在 <path> 中获取当前动画进度 (SMIL)：stroke-dashoffset

SVG get current animation progress (SMIL) in <path>: stroke-dashoffset

javascript

animation

svg

smil