显示SVG路径的速度

Question

美好的一天;

我当然希望有人可以帮助我。 该页面为http://www.drdelmath.com/sketch_parabola/

问题描述很长，以避免误解。

当您进入页面时，屏幕右侧将绘制抛物线。请注意绘制的速度。这就是我想要的一切。 （这个蓝色抛物线只是为了展示我想要的东西）

我正在使用SVG完成所有绘图。

页面上有许多项目。 但是，用户/学生要通过单击按钮来确定何时显示项目。此示例中包含两个这样的按钮。

当您进入页面时，所有元素都以visibility = hidden绘制。 当学生点击按钮时，我使用JavaScript为所需项目设置visibility = visible。它们被显示出来。然而它们绘制得太快了。单击“绘制抛物线”按钮，将速度与绘制蓝色抛物线时的速度进行比较。

如何减慢显示速度，以便看起来有人正在绘制项目？

或者有没有办法延迟执行SVG路径语句，直到学生点击按钮？如果可以，那么我可以使用visibility = visible，一切都按预期执行。

Del

Answer 1

您可以做的是将动画CSS属性放在SVG <path>元素最初没有的类中。然后，当您添加该类时，动画开始。

因此，例如，更改＆＃34;路径＆＃34;的定义。 CSS规则如下：

.path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}

.showpath {
    animation: 5s linear 0s normal forwards 1 running dash;
}

你可以删除＆＃34; visibility：hidden＆＃34;你想要的财产。

然后在你的按钮处理程序中，添加＆＃34; showpath＆＃34;类到您想要设置动画的路径。

document.getElementById("parabola").setAttribute("class", "path showpath");

然而，您的SVG存在问题。你给了同样的＃34; id＆＃34;属于多个元素。 ＆＃34; ID＆＃34;属性必须才是唯一的。所以你应该，例如，他们打电话给他们＆＃34; parabola1＆＃34;和＆＃34;抛物线2＆＃34;。

document.getElementById("parabola1").setAttribute("class", "path showpath");

如果你需要将它们重置为不可见，你可以将class属性恢复到它的开始状态。

document.getElementById("parabola1").setAttribute("class", "path");