javascript - SVG 在 : stroke-dashoffset 中获取当前动画进度 (SMIL)

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://stackoverflow.com/a/17217470/1736186但我不知道如何获得stroke-dashoffset <path> 中的值.

我可以通过结合超时和最小/最大 stroke-dashoffset 来完成它并计算大概的进度，但我相信(希望)我遗漏了一些东西，可以使用 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>