Question

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

我已经在Mozilla网站上搜索了getElementbyId文档，以查看是否存在“ animationdelay”之类的属性。我尝试使用getElementbyId读取animateMotion id的属性。

<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秒。即持续时间保持不变。如何动态更改持续时间？

Answer 1

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

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

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

如何在<animateMotion>中更改dur属性？

1 个答案: