无法套用线条图并将其填充为SVG动画 [英] Unable to apply line drawing and filling it animation in svg
问题描述
我想要画线动画，并且尝试遵循一些youtube教程，并且想要这样的东西 https ：//codepen.io/shshaw/pen/Hjyio 首先绘制徽标，然后填充徽标。直到现在我都尝试过，但失败了。我在堆栈溢出问题中搜索了每个其他问题，每个人都只谈论线描动画，但是我也想填充它。
另外，我也不会绘制任何线条动画。
I want a line drawing animation and I tried to follow some youtube tutorials and I want something like this https://codepen.io/shshaw/pen/Hjyio which first draw the logo then fills it. Till now I tried this but failed miserably. I searched every other question on stack overflow question everyone tell about only line drawing animation but I want to fill it also. Also I don't draw any line animation.
任何关于我错了哪里的建议以及添加px单位都根本没有帮助吗？ p>
Any suggestion of where I am wrong and also adding px unit don't help at all ?
<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
<style>
path {
stroke:#000;
stroke-dasharray: 2500;
stroke-width:3;
animation: my_animation 100s;
}
@keyframes my_animation{
0%{
stroke-dashoffset: 0;
}
50%{
stroke-dashoffset: 2500;
}
100%{
stroke-dashoffset: 0;
}
}
</style>
</head>
<body>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640" width="640" height="640"><defs><path d="M479 320L639 0L318.99 0L-1 0L158.98 320L318.99 640L479 320Z" id="aLRf203Rm"></path><path d="M301.47 203.41L401.95 0L200.97 0L0 0L100.48 203.41L200.97 406.83L301.47 203.41Z" id="a1ManYbeyy"></path></defs><g><g><use xlink:href="#aLRf203Rm" opacity="1" fill="#ff0043" fill-opacity="1"></use><g><use xlink:href="#aLRf203Rm" opacity="1" fill-opacity="0" stroke="#ff0043" stroke-width="1" stroke-opacity="1"></use></g></g><g><use xlink:href="#a1ManYbeyy" opacity="1" fill="#00ffda" fill-opacity="1"></use><g><use xlink:href="#a1ManYbeyy" opacity="1" fill-opacity="0" stroke="#00ffda" stroke-width="1" stroke-opacity="1"></use></g></g></g></svg>
</body>
</html>
推荐答案
只需使用关键帧。在此示例中，我使笔画动画的运行时间从0％更改为80％。然后，使用 fill-opacity 从80％到100％的时间使填充淡入。
Just use your keyframes. In this example, I have made the stroke animation run from time 0% to 80%. Then I make the fill fade in using fill-opacity from time 80% to 100%.
path {
stroke:#000;
stroke-dasharray: 2072;
stroke-width:3;
animation: my_animation 4s;
animation-fill-mode: forwards;
fill: red;
}
@keyframes my_animation{
0%{
stroke-dashoffset: 2072;
fill-opacity: 0;
}
80%{
stroke-dashoffset: 0;
fill-opacity: 0;
}
100%{
fill-opacity: 1;
}
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640" width="640" height="640"><defs><path d="M479 320L639 0L318.99 0L-1 0L158.98 320L318.99 640L479 320Z" id="aLRf203Rm"></path><path d="M301.47 203.41L401.95 0L200.97 0L0 0L100.48 203.41L200.97 406.83L301.47 203.41Z" id="a1ManYbeyy"></path></defs><g><g><use xlink:href="#aLRf203Rm" opacity="1" fill="#ff0043" fill-opacity="1"></use><g><use xlink:href="#aLRf203Rm" opacity="1" fill-opacity="0" stroke="#ff0043" stroke-width="1" stroke-opacity="1"></use></g></g><g><use xlink:href="#a1ManYbeyy" opacity="1" fill="#00ffda" fill-opacity="1"></use><g><use xlink:href="#a1ManYbeyy" opacity="1" fill-opacity="0" stroke="#00ffda" stroke-width="1" stroke-opacity="1"></use></g></g></g></svg>
这篇关于无法套用线条图并将其填充为SVG动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
