时间戳

首页 > 解决方案 > 如何更改dur属性?

javascript - 如何更改dur属性?

问题描述

根据当前时间，我需要将球放在一条线上的位置。考虑使用在时钟上定位分针。

我在 Mozilla 网站上搜索了getElementbyId文档，看看是否有像“animationdelay”这样的属性。我尝试阅读 animateMotion id 的属性getElementbyId。

<svg class="progress" height="500" width="500" 
xmlns="http://www.w3.org/2000/svg" version="1.1" 
xmlns:xlink="http://www.w3.org/1999/xlink">


<path id="link"  d=" M 50,50 L 500,100 " fill="none"/>
<circle cx="" cy="" r=5>
<!-- Define the motion path animation -->
<animateMotion id="alterid" dur="21s" repeatCount="indefinite" 
keyPoints=".7;0" keyTimes="0;1" calcMode="linear">
<mpath xlink:href="#link"/>
</animateMotion>
</circle>
</svg> 


x1=document.getElementById("alterid");
x1.dur="222s";

https://codepen.io/anon/pen/ydKjgL#anon-login

在上面的代码中，由于 x1.dur 代码，我预计球动画需要 222 秒，而不是动画需要 21 秒；即持续时间保持不变。如何动态更改持续时间？

标签： javascripthtmlcssanimation

解决方案

您可以使用 D3 轻松访问 DOM 元素。

<script src="https://d3js.org/d3.v4.min.js"></script>

<script>
d3.select("animateMotion")
.attr("dur", '222s')
</script>

推荐阅读