svg 虚线动态_在虚线上签名：动画自己的SVG签名

最新推荐文章于 2023-07-11 14:08:11 发布

daique1908

最新推荐文章于 2023-07-11 14:08:11 发布

阅读量964

点赞数

文章标签： java python css html javascript ViewUI

svg 虚线动态

对SVG的笔画进行动画处理非常适合模拟笔迹。在两个教程的过程中，我们将使用CSS动画使签名看起来整洁，就像您自己在对页面签名一样。

这是我们将要构建的：

在深入研究任何代码之前，我们需要您的签名的SVG版本。使用哪种软件都无关紧要，但是请尝试使线条和曲线尽可能平滑以达到最佳效果。

这是我的，您可以看到它是通过三个单独的路径绘制的：

确保您的画板紧贴签名，然后将文件另存为SVG。

在代码编辑器中打开文件将显示SVG的XML结构。根据用来设计该应用程序的应用程序以及保存或导出该应用程序的方式，您将有一个<svg>元素，该元素之前带有一些巨型框。巨大的巨无霸可以被移除。

在这种情况下，剩下的元素看起来像：

<svg>
    <line/>
    <path/>
    <line/>
</svg>

在我们的主要<svg>我们有一个<line> ，然后是<path> ，然后是另一个<line> 。这是我们绘制的三个向量，它们的区别只是因为从技术上讲，一条线没有曲率，所以它的定义与SVG中的路径不同。

稍后我们需要用CSS分别定位这些向量，因此请确保它们各自具有合适的类名。 <svg>元素可能已经具有一个ID，该ID反映了其设计所在的应用程序中的图层名称。

<svg id="signature">
    <line class="stroke-I" />
    <path class="stroke-an" />
    <line class="stroke-flourish" />
</svg>

我已经根据向量类的名称给出了它们的名称（例如，第一个是我名称中的“ I”）。

公平地说，您的SVG看起来不会如此整洁。这些向量中的每一个都有大量的坐标，以及埋在其中的几个属性。坐标将需要保留，但是我们可以删除一些常用的属性，并将其放在CSS中，以保持美观和

关注