Fatal编程技术网
  • css/
  • Css 如何绘制填充svg？

Css 如何绘制填充svg？

css animation svg

Css 如何绘制填充svg？,css,animation,svg,fill,Css,Animation,Svg,Fill,我想为我的标志制作动画，就像为展示它而画一样， 看起来是这样的： 只能用填充物绘制吗？ 我看过的每一篇教程都只展示了用笔画的可能性。 但实际上，我希望我的填充具有相同的绘图效果： .st1{fill:black；}简单的答案是否定的。对于任意填充形状，没有简单的方法可以获得“绘制线”效果。您可以使用线性填充的遮罩从上到下或从下到上“填充”它。但很明显，这将遵循环周围的线的形状，等等 你几乎无法使用传统的动画技术：绘制一系列帧，然后一个接一个地显示它们。像这样一个漂亮而简单的徽标，你可以通过笔

我想为我的标志制作动画，就像为展示它而画一样， 看起来是这样的：

只能用填充物绘制吗？ 我看过的每一篇教程都只展示了用笔画的可能性。 但实际上，我希望我的填充具有相同的绘图效果：

.st1{fill:black；}
简单的答案是否定的。对于任意填充形状，没有简单的方法可以获得“绘制线”效果。您可以使用线性填充的遮罩从上到下或从下到上“填充”它。但很明显，这将遵循环周围的线的形状，等等

你几乎无法使用传统的动画技术：绘制一系列帧，然后一个接一个地显示它们。

像这样一个漂亮而简单的徽标，你可以通过笔划很容易地伪造它：

  • 在SVG中添加两条“假”线，其笔划宽度应足以覆盖徽标
  • 使用原始徽标路径（
    .st1
    ）作为这些行上的
    clipPath
    ，以隐藏徽标外部的零件
  • 设置“假”线的动画。（）

    • 更新的fiddle:

    这是我找到的梯度解决方案：
    用线性渐变填充，并设置渐变停止动画。有很多这样的例子。我们谈论的是什么样的“绘画”效果？你想让它褪色吗？从虚无中成长？看一看，看看有没有你喜欢的效果眼睛我想让它从一点都不喜欢的地方长出来，但这使用笔划，我需要同样的画线效果，但有了填充，我得到了花园的解决方案，但你的解决方案很好，谢谢