это не показывает анимацию, как это
у анимацию рисования линий, и я пытался следовать некоторым учебникам YouTube, и я хочу что-то вроде этогоhttps://codepen.io/shshaw/pen/Hjyio который сначала рисует логотип, затем заполняет его. До сих пор я пробовал это, но с треском провалился. Я перебрал все остальные вопросы о переполнении стека, которые все рассказывают только об анимации рисования линий, но я также хочу заполнить ее. Также я не рисую анимацию линий.
Любое предложение о том, где я ошибаюсь, а также добавление px, не поможет вообще?
<!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>