SVG 填充路径动画

SVG Fill Path Animation

本文关键字：动画 路径 填充 SVG      更新时间：2023-09-26

我没有svg和动画的经验，我有以下文件jsfiddle，我想对填充路径颜色进行动画处理。

我想将其用作加载器，因此新颜色应该填充路径，例如滑动或类似的东西，使其看起来"加载"。您可以使用任何颜色，这只是一个例子...

谢谢

我知道

这并不完全是您想要的方式，但请查看此链接：

http://cdn.tinfishcreativedev.eu/eyeLoad/

它有一个非常简单的实现（目前很粗糙，但只是为了让你入门）。

HTML 文件中的代码如下所示：

<style>
body{
    background:#F3F5F6;
    text-align: center;
}
.loader{
    background: #000;
    display: inline-block;
    position: relative;
    height:63px;
    width:100px;
    margin-top:300px;
}

.loader img{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index:2;
}
.loaderBar{
    background: #16C38B;
    width: 0;
    position: relative;
    z-index: 1;
    height:100%;
    -webkit-animation:grow 2s infinite linear;
}
@-webkit-keyframes grow{
    0%{ width:0; }
    100%{ width: 100%; }
}
</style>
<div class="loader">
    <img src="eye.png" width="100" />
    <div class="loaderBar">
</div>

如果需要，您甚至可以使用 JS 而不是关键帧来使其在 IE8 等旧浏览器上运行。

相关文章：