Невозможно применить рисование линий и заполнить их анимацией в SVG - PullRequest
Новая
       5

Невозможно применить рисование линий и заполнить их анимацией в SVG

0 голосов
/ 01 сентября 2018

Мне нужна анимация рисования линий, и я попытался следовать некоторым урокам на 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>

1 Ответ

0 голосов
/ 03 сентября 2018

Просто используйте ваши ключевые кадры. В этом примере я сделал анимацию обводки от 0% до 80%. Затем я делаю заливку постепенно, используя fill-opacity от 80% до 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...