问题标签 [vivus]

我想在鼠标悬停时重绘我的矩形。

现在我的 html 中有这个：

我想充其量只使用css属性来做到这一点。现在我只能使用转换属性将矩形的宽度从其原始大小更改为另一个。

我尝试使用 vivus 库，但没有用。

谢谢。

我有一个 div，overflow: scroll里面的 svgs 应该在滚动时动画，但是它们只在正文（文档）中动画，如果我在 div 内向下滚动，它不会触发。

我试图在滚动时触发Vivus，但每次我向下或向上滚动时它都会动画。

我想在第一次在 div 内向下滚动时为 svg 设置动画。

jsFiddle- 默认
jsFiddle- 滚动功能

我正在尝试制作带有徽标文字的干净徽标动画，隐形铅笔样式。

我正在使用vivus.js，这对于编写 svg 动画脚本非常有用。

使用字体 "Alex Brush"，我想在 SVG 中逐步显示一些文本，比如这个：

但是，vivus.js 只对笔画进行动画处理，而不是填充。所以这就是我想要实现的目标：

我想制作文本的 2 个版本。首先，用我的文字轮廓设计的面具，像这样：

其次，带有中心线的文本的另一个版本。虽然我可以使用这样的工具来实现这一目标，但我认为如果我“手动”完成它会更干净。最重要的是，我会有一个或多或少准确的上面概述的文本版本，只有一个路径/笔划。

第三，我会增加stroke-width中心线模型的。

最后，我会在一行文本上使用 vivus.js，但隐藏轮廓蒙版/图层之外的内容。

我被困在这部分（上面的粗体字）。到目前为止，我有 2 条线索：svgmask或clipPath.

但是，由于没有尝试过这种 SVG 操作，我想知道这在跨浏览器兼容性方面是否是一个好主意，以及是否有建议的特定方法（在性能方面也是如此）。

我的目标是尝试让这种笔迹看起来尽可能自然，就好像用钢笔写的一样。

我认为最好的选择是在写完每个字母后填充它们，但到目前为止，我所做的只是在整个动画完成后填充：

在每个字母完成动画后，我将如何实现这一点，或者有人有更好的选择吗？这是未填充的状态：

https://codepen.io/anon/pen/WjBeWG

我的名字是 Daniel Götz，我目前正在我的投资组合网站上工作，但我有一个问题。我的 SVG 动画一旦结束就不会填充。

我的网站：http: //20162.hosts.ma-cloud.nl/portfoliowebsite/

如果您向下滚动到名为“Mijn 技能”的 H1，您可以看到 Photoshop 徽标正在动画化。但是我想在动画结束后填充。

动画结束后有什么方法可以让它填充吗？

HTML：

CSS：

JAVASCRIPT：

在使用 Vivus for SVG 之前，有没有办法反向绘制（实际上是擦除）选定的路径？假设我们有这样的小提琴：http: //jsfiddle.net/z7x4ovn7/92/

绘制完所有路径后，我想用 id 反向绘制路径path2000。你有什么想法吗？

试图在 jQuery 中将多个函数变成一个 .each 函数，但得到空白页。知道我错过了什么吗？

此代码运行正常：

这是我正在尝试构建的每个功能：

如果需要，这里是 HTML...括号是 ExpressionEngine 中使用的代码：

我正在尝试在 Angular 5 中使用这个库 Vivus.js 并且从 Vivus 的构造函数中遇到问题，所以我认为它正在加载库并正确使用它，我想知道是否有人可以让我了解它为什么不拿起我的元素ID。这是图书馆：https ://github.com/maxwellito/vivus

这是我到目前为止所做的：

这是 id 为“药丸”的 svg：

这是我的组件代码：

我正在像这样导入库：import * as vivus from 'vivus';

然后在订阅 Observable 确认数据并拥有一个对象后使用它，因为我*ngIf在标记上使用 an 来等待这个 observable 数据。

const x = new vivus('pill', {duration: 2000}, this.after());

这是我使用该代码遇到的问题：

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

我也试过这个：

const x = new vivus(document.getElementById('pill'), {duration: 2000}, this.after());

我得到了这个问题：

无法读取 null 的属性“构造函数”

这些问题似乎是在 Vivus 调用其setElement()方法的过程中发生的。

我找到了 vivus 的类型，想知道我是否也应该安装这些：https ://libraries.io/npm/@types%2Fvivus

如果您需要在我的标记中查看更多代码或在确认数据后运行 vivus 对象创建的 Observable 订阅中，请告诉我。

为这个页面提供 svg 只是显示，没有动画。在这里感谢任何和所有的帮助，我很想在 Angular 5 中使用这个库来制作 svgs 上的动画。提前致谢。

在移动设备上，svg vivus 动画会在页面加载完成时自动启动，忽略

vivus.play()

在我的情况下，只有在被操作触发时才应该启动的命令。

这发生在 ios/android 上，但不在 ipad 上

如何使用 Vivus.js 绘制多个 SVG，这样我就不必为每个绘图调用该函数，例如下面的那些？此外，第二张图似乎有问题，即它没有动画......也许有人有这些经验吗？

由于 svg 代码大小，这是一支笔：https ://codepen.io/anon/pen/KoNjjy