Question

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

我知道在使用<circle>元素时如何获得动画进度：https://stackoverflow.com/a/17217470/1736186但我不知道如何在stroke-dashoffset中获得<path>值。

我可以通过将超时与min / max stroke-dashoffset结合起来并计算近似进度来完成它，但我相信（希望）我遗漏了一些内容，可以使用animVal轻松完成。所以请不要用这种解决方案发布答案，因为我知道如何自己做。

Answer 1

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: