问题标签 [vivus]

我正在尝试在 wordpress 中使用 Vivus.js 脚本来为我的 svg 徽标绘图设置动画。它正在加载 js 文件，但在错误控制台中我得到： SyntaxError: Unexpected token '<' references the virus.js 文件的第一行。

这是我在 Wordpress Footer.php 中的脚本：

一切都在 WordPress 之外工作，但是当我把它放在我的主题文件中时，它不会执行动画。

我的页面地址是http://entrepology.studio-element.com

我正在尝试向后运行 SVG 线条动画，但我似乎无法使用Vivus 插件让它工作

这是我的代码

我的 SVG：

我的 jQuery：

Vivus 插件网站声明“play(speed) 以参数中给定的速度播放动画。该值可以为负值向后退，0 到 1 之间为慢速，或高于 1 为快。默认值为1."

由于某种原因，当我添加任何负值时，插件不起作用，并且我没有收到任何控制台错误。

有人做过这项工作吗？

上面的代码作为小提琴

我正在使用 vivus.js 创建一个简单的动画，但是它不起作用。第一次我创建 svg 并给出一个 id。然后我创建一个函数：

我只是传入元素 id，然后传入带有键值对的对象。这应该可行，但我在控制台中收到此错误：

未捕获的错误：Vivus [构造函数]：“元素”参数与现有 ID 无关

所以我只是想给出一个我想为朋友开发的基本概念，其中字母“M”（他的标志）像白板上一样被绘制出来。

我正在尝试使用Vivus为 SVG 设置动画。

在该站点上，我能够显示 SVG，因此我知道我做对了，但是仅当我尝试调用其中一个函数时才会出现错误。

经过进一步检查，我发现它是 Vivus 代码的一部分：

它说它是未定义的，所以我必须在我的代码中的某处定义长度吗？我目前没有为此使用网络服务器，但这与此有关吗？感谢您提供任何形式的帮助。

我正在尝试使用 svg 和名为 Vivus 的 jQuery 插件创建路径动画，该插件有助于创建动画 svg。我遇到的问题是我的路径是虚线的，因为它只有一条路径，所以当脚本运行时，它将它连接成一条直线。我尝试手动创建每条虚线，但看起来不太好。我的问题是，有没有办法制作一条虚线，然后将每条虚线分成自己的路径？或者我还有什么其他方法可以实现这一目标？

这是我正在谈论的那种路径： 路径

我一直在使用 vivus.js 制作微小的 svg 动画，现在这个插件具有以下初始化格式：

使用起来很简单，现在我的问题是关于duration: 200参数的。在这里查看它的文档。现在，每当我使用 jquery 和其他库等1000时，意味着 1 秒，但这里200不是很清楚，文档说明如下：

duration :: 动画持续时间，以帧为单位。[默认值：200]。

现在，帧中的动画持续时间到底是什么意思？2000 年到底是什么200？

这是我的问题：

我有一个非常高的 svg（1220px 高度，在视图框中设置）。

如下所示：

我正在使用 vivus 为我的所有 svg 设置动画：

});

我遇到的问题是，视图框设置为 1220px 高度，动画仅在我到达 svg 底部时开始！

你可以在这里看到一个活生生的例子：http: //codepen.io/anon/pen/GZJvLm

我可以使用视口看到 vivus.js 脚本中的代码，但如果我玩弄它就不能让它工作（如果这样更清楚？）

它全是白色的，但如果你在底部滚动，你会看到比 svg 出现并开始动画。

当我在 svg 顶部的视图上滚动时，有什么方法可以让动画开始让我们说 100 像素？还是就在它出现的时候？

谢谢你的帮助，我很头疼，任何高光都会很棒:)

例如，我有以下代码使用 D3 库：

它在页面上对角绘制 7 个图像（浣熊图像） - 但在现实生活中，它们将随机放置在页面中。

我想在成对的图像之间画线，没有任何线与任何其他图像相交（如果可能的话）。重要的是，计算不会仅根据给定的示例进行，而是针对每个可能的散射进行。

线条不一定要笔直，但看起来应该很好看，所以最好是圆形的线条。

编辑： 为了使它更容易 - 假设我想在两个图像之间绘制一个箭头，这些图像一个接一个地被点击（从第一个图像点击到第二个的箭头），假设我点击了第一个图像，然后是最后一个- 一条简单的直线将穿过所有其他图像。相反，我想画一条圆线，将在所有其他图像的上方/下方并将两者连接起来。

我遇到了一个名为 vivus.js 的库，它使用 SVG 绘制路径，也许我可以在其中找到答案？

在 D3 或 Vivus.js 库中是否有一种优雅的方式来执行此操作？

我有这个代码：

它应该可以按我的意愿工作，因为它们都是路径，有描边，没有填充。但控制台显示：“未捕获的 ReferenceError：未定义 Pathformer”。Pathformer.js 仅在您有其他元素时使用，例如<circle> or <rect>，那么为什么会显示该错误？

我正在尝试为 SVG 设置动画，vivus.js但它似乎没有做任何事情。

Vivus 似乎能够正确读取 SVG，我可以运行以下代码：

并在控制台中得到以下结果（vivus 建议您调试它的方式）：

这对我说 vivus 正在工作，但是当代码运行时，什么也没有发生。

请参阅以下非常简单的 jsfiddle 示例：

https://jsfiddle.net/zzgnkwtn/2/

我能想到的只是我的 SVG 可能有问题，但看到它正确地拾取路径，这似乎不正确。

这是 vivus 文档的链接，如果有人想看看，我很难过。

https://github.com/maxwellito/vivus#vivusjs

提前感谢您的帮助。

编辑

（将标题从“使用 vivus.js 的 SVG 动画不工作”更改为“如何以与 vivus.js 类似的样式为 SVG 填充和路径设置动画”）

我已经意识到我想要实现的最终目标实际上并不是上面的问题，这是因为我是 SVG 动画的新手并且开始走错了路。

我更希望实现的是类似于以下教程： https ://medium.com/@gordonnl/stylised-line-animations-ded23320ffe5#.v6va1kc1w

关键区别和我正在努力的主要事情是我想要那种确切类型的动画，但我想为路径设置动画fill，而不仅仅是路径。

在@Alvin 的帮助下，我意识到某种clipPath或是mask必需的，我尝试按照上面的教程来做到这一点，但这是我得到的结果： http: //codepen.io/anon/pen/dMeQLB

这似乎为某些路径设置了动画，但它绝对不是我想要的。

任何人的任何帮助都会很棒！

最后结果

我终于设法实现了我想要做的事情，大部分问题是SVG没有以最好的方式在Illustrator中制作动画，我需要将我的对象转换为a Compound Path，这样我就可以使用它clipPath然后拥有一个简单的路径，我可以轻松地在其下制作动画。

演示：http ://codepen.io/anon/pen/zqjyzX