HTML/JS - SVG fill

Question

在我的HTML代码中，我有：

<animate id= animationBottle attributeName="y1"
from="101%"
to="70%"
begin="0s"
dur="1s"
fill="freeze"> 
</animate>

有没有一种方法可以使"to＝"；70%"带有JS的变量？

提前感谢！

Answer 1

您可以使用Javascript设置属性的值(70%(("to"(。

document.getElementById("animationBottle").setAttribute("to", "70%");

如果您将值70作为变量(var value = 70(，并希望将其与setAttribute一起使用，请执行以下操作：

var value = 70;
var value_perc = `${value}%`;
document.getElementById("animationBottle").setAttribute("to", value_perc);

您也可以使用数字作为输入来创建一个函数。