SVG路径的显示速度

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

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

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

我正在做所有的绘图与SVG。

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

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

我该如何减慢显示速度，使其看起来像有人在绘制物品？

或者有没有办法延迟执行SVG路径语句，直到学生单击按钮？如果这是可能的，那么我可以使用可见性=可见，并且一切都按需要执行。

德尔

来源

2014-10-27 Delano Wegener

我想你应该通过在JavaScript中显示SVG中的元素来解决这个问题。 – Brad 2014-10-27 21:20:07

你所说的延迟是通过CSS实现的。您是否尝试手动添加路径而不是切换可见性？ – 2014-10-27 21:23:26

布拉德和坦泽尔;我不明白你在暗示什么。如何在SVG中显示元素？如何手动追加路径？你是什么意思？ – 2014-10-27 23:39:06

你可以做的就是把动画的CSS属性一类的SVG <path>元素没有开始。然后，当您添加课程时，动画开始。如果你想属性

因此，例如，按如下方式更改“路径” 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");

来源

2014-10-28 03:09:21

感谢BigBadaboom。你的建议使我成为一个快乐的人。以高分辨率查看FF中的http://www.drdelmath.com/sketch_parabola/index.html（我仍然有一些工作使其在较低的分辨率下工作）。但是，它似乎只在FF中工作，我认为这是因为大多数其他浏览器（尤其是IE）不支持SVG动画。对于我可以加入的行 – 2014-10-29 21:04:47

我应该寻找JavaScript解决方法吗？我知道如何使用JavaScript代替线条，但不使用抛物线。 – 2014-10-29 21:07:53

对于其他浏览器，您需要在“动画”和“@关键帧”规则前缀。例如，在Chrome中，您需要使用'-webkit-animation'。有关详细信息，请参阅此处的浏览器兼容性表：https://developer.mozilla.org/en-US/docs/Web/CSS/animation – 2014-10-30 03:21:44

SVG路径的显示速度

回答

相关问题