问题标签 [vivus]

我正在使用 Vivus JS 库，它非常适合绘制图片等动画路径。现在，我有这个 SVG 图标，它应该以 100% 的线宽进行动画处理，但它似乎不起作用。在我项目中的其他图标上效果很好。

看这个CodePen：http ://codepen.io/anon/pen/yOqdbN总结如下

有谁知道为什么会这样？非常感谢您为我指明正确方向的任何帮助。

嘿，伙计们，我有以下使用 vivus.js 的 SVG 绘图动画，请参见此处，svg 如下：

我正在使用以下 JS 为 svg 设置动画：

现在绘图完成后，我想将填充添加到徽标中，因此我在回调函数中有以下内容：

但这似乎真的不起作用，有人可以告诉我我在这里做错了什么吗？为什么填充不适用？一旦绘图动画完成，我真的很想应用填充。

有没有办法通过 Class 而不是 ID 选择 SVG，像这样：

我有两个使用 CSS 重叠的 SVG 矢量。见这里。形状如下：

如果我通过删除（检查以下内容）来更改 CSS position:absolute，那么它们就会变成两个单独的形状。它们不再重叠（在这种情况下保持相邻）。

在这个问题中：如何重叠两个 SVG 图像？，它说 CSS 是一种解决方案，或者我可以在单个 SVG 标记（内联 SVG）中同时使用它们。

1. 我不能使用 CSS；因为我需要将形状放在另一个 HTML 页面中。如果我保留position: absolute，它会造成您可以想象的各种混乱。
2. 我不能使用内联 SVG；因为我正在尝试使用Vivus为形状设置动画。此 JS 库要求两个形状都位于单独的 SVG 标记内。所以我需要将形状保存在两个不同的 SVG 标签中，以使它们分别动画。

有没有其他天才破解这个问题？（没有 CSS 或内联 SVG）

I'm new to reactJS and I'm trying to make my SVG's animated in React and I am having some issues.

I got vivus from https://www.npmjs.com/package/vivus

And this trows me an error. I think that the issue is with constructor, but I am not sure where to put the vivus object?

Error message:

Uncaught Error: Vivus [constructor]: "element" parameter is not related to an existing ID

我正在使用 vivus.js 为重复多次的 svg 设置动画（作为 php 循环的一部分）。

我正在寻找一种交错动画的方法，以便 svg id 'hexx--0' 首先进行动画处理，然后在完成时，svg id 'hexx--1' 进行动画处理，依此类推。ID 号在 php 循环中递增。

我试图将它们链接在一个函数中，该函数在第一个动画完成时触发，如下所示：

这可行，但是a）意味着svg在动画触发之前是可见的，并且b）在一个可能有任意数量的svg的循环中是混乱且不可维护的。

是否可以在 JavaScript 中增加 ID，并在循环中生成新的 Vivus？下面是一个复制问题的小提琴，请注意，在真实情况下，html 是通过 php 循环生成的。

我是 svg 动画的新手。我想和 vivus.js 一起工作。我已经建立了测试环境。并从这里下载了一个 svg：https ://www.svgimages.com/hand.html 我尝试对其进行动画处理，但它不起作用，但是当我用示例 svg 替换它时它可以工作。有什么帮助吗？

我试图在图像上实现平滑过渡效果，在 vivus.js 进行中风之后，它应该在图像出现时进行平滑过渡，但不幸的是它没有。使用颜色效果很好，但无法弄清楚为什么它不能使用图像？活生生的例子：

谢谢你的帮助

当我导航到我网站上的另一个页面时，我在控制台中收到此错误

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

我在 jQuery 就绪文档下有这段代码

'built-left-swirl' id 仅在主页中，不在其他页面上

我在我的主页上使用 Vivus，但在其他页面上没有，我如何设置它只在主页上查找 id？

我现在正在使用 Vivus.js 制作 svg 动画。

这是一个 SVG 线条动画，带有一些文本描述，位于 svg 的文本标签内。

因为vivus.js不能处理文字动画，所以我简单的先让文字的不透明度为0，等svg线条动画完成后，再让文字的不透明度为1，使其可见。

这是在codepen中导入 vivus.min.js 后放置的 .js 代码的主要部分：

代码的最后一部分是我的问题。

我认为代码不起作用，因为我编写的“if 条件”在页面加载的一开始就被评估，即False。

因此我的问题是，如何正确跟踪 svg 行的strokeDashoffset，以便在window.getComputedStyle(line).strokeDashoffset变为“0px”后将文本的不透明度设为 1？

谢谢！