Javascript SVG路径的显示速度

你好

我当然希望有人能帮我。 这一页是

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

当您进入页面时，屏幕右侧将绘制一条抛物线。请注意绘制它的速度。这就是我希望这一页上的所有内容。这条蓝色抛物线只是为了说明我想要什么

我正在用SVG绘制所有的图形

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

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

如何降低显示速度，使其看起来像有人在绘制项目

或者有没有办法延迟SVG path语句的执行，直到学生单击按钮？如果这是可能的，那么我可以使用visibility=visible，并且一切都按预期执行

---

Del

您可以将动画CSS属性放入SVG元素最初没有的类中。然后，添加类时，动画开始

因此，例如，更改路径CSS规则的定义如下：

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

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

如果需要，可以删除“可见性：隐藏”属性

然后在按钮处理程序中，将showpath类添加到要在其中设置动画的路径中

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

但是，SVG存在一个问题。您已为多个元素指定了相同的id属性。id属性必须是唯一的。比如，你应该把它们叫做抛物线1和抛物线2

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

如果需要将它们重置为不可见，可以将class属性恢复为其启动方式

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

---

我认为您应该通过JavaScript在SVG中显示元素来实现这一点。您提到的延迟是通过CSS实现的。您是否尝试手动附加路径而不是切换可见性；我不明白你的意思。如何在SVG中显示元素？如何手动附加路径？你这是什么意思？谢谢BigBadaboom。你的建议使我成为一个快乐的人。在高分辨率的FF中，我还有一些工作要做，以使其在低分辨率下工作。然而，它似乎只在FF中工作，我认为这是因为大多数其他浏览器，特别是IE不支持SVG动画。对于我可以使用的行，我应该使用JavaScript来解决问题吗？我知道如何对线条使用JavaScript，但对抛物线不使用JavaScript。对于其他浏览器，您需要为动画和@keyframes规则添加前缀。例如，在Chrome中，您需要使用-webkit动画。更多信息请参见此处的浏览器兼容性表：我无法使其在IE10或IE11中工作。现在，在我的Android手机上，最新版本的FF、Opera、Chrome、Safari似乎都使用了前缀。但不是IE。有希望让它工作吗？目前的工作版本是。