6

Необходимо добиться следующего эффекта: http://gph.is/2iZZ3Hw - рисования контуров и затем заполнение цветом.
Для определения общей длины путей может понадобиться JS.

Ниже код

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 47.4 47.7" style="enable-background:new 0 0 47.4 47.7;" xml:space="preserve">
<style type="text/css">
    .st0{fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:#FEC558;stroke-width:0.5;stroke-miterlimit:22.9256;}
    .st1{fill:#FFC656;}
</style>
<path class="st0" d="M23.7,45.8c12.1,0,22-9.9,22-22c0-12.1-9.9-22-22-22c-12.1,0-22,9.9-22,22C1.7,35.9,11.6,45.8,23.7,45.8z"/>
    <g>
        <polygon class="st1" points="14.1,17.9 14.1,20.2 14.1,22.2 14.1,23.4 14.1,24.7 14.1,27.6 32.7,35.2 32.7,32.5 32.7,30.7 
    32.7,29.7 32.7,28.5 32.7,25.2   "/>
        <polygon class="st1" points="19.2,18.7 24.3,20.6 27.5,21.9 27.5,21.2 27.5,19.4 27.5,17.5 27.5,16.3 27.5,15.2 27.5,12.5 
    15.5,17.2 19.2,18.7     "/>
    </g>
</svg>

Свободный перевод вопроса Animate SVG with CSS: first the stroke, then the fill от участника @Cristian C.

1

2 ответа 2

7

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="30%" height="30%" viewBox="0 0 47.4 47.7" >
<style type="text/css">
    .st0 {
     fill:none;
     stroke:#FEC558;
     stroke-width:0.5;
     }
    .st1{fill:#FFC656;}
</style>
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%" >
         
            <stop offset="0%" stop-color="#33363D"/>
            <stop offset="100%" stop-color="#5B5D5A"/>
</lineargradient>
</defs> 
<rect width="100%" height="100%" fill="url(#grad)"/>

<path id="circle" class="st0" stroke-dashoffset="138" stroke-dasharray="138" d="M23.7,45.8c12.1,0,22-9.9,22-22c0-12.1-9.9-22-22-22c-12.1,0-22,9.9-22,22C1.7,35.9,11.6,45.8,23.7,45.8z">
<animate id="an_circle" attributeName="stroke-dashoffset" values="138;0" dur="2s" fill="freeze" />
</path>
    <g stroke-width="0.5">
       <path id="trap" class="st1" stroke-dashoffset="60" stroke-dasharray="60" style="fill:none; stroke:#FEC558;" d="M14.1,17.9 14.1,20.2 14.1,22.2 14.1,23.4 14.1,24.7 14.1,27.6 32.7,35.2 32.7,32.5 32.7,30.7  32.7,29.7 32.7,28.5 32.7,25.2z">
        <animate id="an_trap" attributeName="stroke-dashoffset" values="60;0" dur="1s" fill="freeze" />
        <animate id="fill_trap" attributeName="fill" values="#33363D;#FEC558"  begin="an_circle.end" dur="1s" fill="freeze" />
     </path>
        <path id="triangle" class="st1" stroke-dashoffset="35" stroke-dasharray="35" style="fill:none; stroke:#FEC558;"  d="M19.2,18.7 24.3,20.6 27.5,21.9 27.5,21.2 27.5,19.4 27.5,17.5 27.5,16.3 27.5,15.2 27.5,12.5 15.5,17.2 19.2,18.7">
        
        <animate id="an_triangle" attributeName="stroke-dashoffset" begin="an_trap.end" values="35;0" dur="1s" fill="freeze" />
          <animate id="fill_triangle" attributeName="fill" values="#33363D;#FEC558"  begin="fill_trap.end-0.5s" dur="1s" fill="freeze" />
      </path>
    </g>
</svg>

Из примера видно, что нужно анимировать строки трёх объектов логотипа: круга, трапеции и треугольника, затем заполнить цветом трапецию и треугольник.

Для анимации строк определяем их длину с помощью JS

<script>
         function TotalLength(){
          var path = document.querySelector('#circle');
        var len = Math.round(path.getTotalLength() );
        alert("path length - " + len);
        };
  </script>

Найденная длина для:

окружности - 138px

трапеции - 60px

треугольника - 35px

  • Команды для анимации рисования строк
<animate id="an_circle" attributeName="stroke-dashoffset" values="138;0" 
     dur="2s" fill="freeze" />
  <animate id="an_trap" attributeName="stroke-dashoffset" values="60;0" 
      dur="1s" fill="freeze" />
  <animate id="an_triangle" attributeName="stroke-dashoffset" 
    begin="an_trap.end" values="35;0" dur="1s" fill="freeze" />
  • Анимация рисования треугольника начнется, когда закончится анимация рисования трапеции

begin="an_trap.end"

  • Анимация закрашивания трапеции начнется, когда закончится анимация рисования окружности
    <animate id="fill_trap" attributeName="fill" values="#33363D;#FEC558"  
    begin="an_circle.end" dur="1s" fill="freeze" />
  • Анимация заполнение цветом треугольника начнется, когда закончится анимация заполнения цветом трапеции
<animate id="fill_triangle" attributeName="fill"
   values="#33363D;#FEC558"  
     begin="fill_trap.end-0.5s" dur="1s" fill="freeze" />

UPD

Поддержка всеми современными браузерами кроме IE https://caniuse.com/#search=svg%20smil

Свободный перевод ответа от участника @Alexandr_TT.

7
  • у меня к тебе будет просьба.. если можно, я завтра реализую один пример на чистом css, подскажешь, как на svg переделать? как сделаю отпишусь тут в коменте... будет время глянешь? я лучше вникаю на примерах
    – Air
    17 ноя 2017 в 18:03
  • ок ок))))))))))
    – Air
    17 ноя 2017 в 18:16
  • 1
    @Alexandr_T Здравствуйте! Ваше решение кажется неплохим, но нет поддержки IE-11. При этом нет и альтернативы для данного браузера, т.е. там просто черный квадрат. Я должно быть не знаю ни одного проекта, где бы не требовалась поддержка IE-11, Win-7 это IE-11, и ее еще многие используют. Мне вариант с решением, которое неприменимо на практике, не кажется решением. Если вы предлагаете для IE-10/11 делать альтернативу, которая будет отображаться именно там, тогда, считаю, это нужно отразить в коде. Также стоит написать поддержку браузерами вашего решения. Всего вам доброго! 17 ноя 2017 в 19:34
  • @AlexandrKazakov IE8-IE11, Edge не поддерживает анимацию svg из принципа и как сказал их главный менеджер поддерживать не будет никогда. caniuse.com/#search=svg%20smil Только хаки и js библиотеки типа рафаэль и snap.js от Дмитрия Барановского справляются с этим. 17 ноя 2017 в 19:42
  • 1
    @Alexandr_T Простите, если обидел своими словами. Я сам верстальщик, и вот, мое мнение, с такой поддержкой, это неприменимо на практике в коммерческих проектах. Только это я хотел написать. Второе, я написал, что тогда можно делать отдельную версию для IE, когда мы эту скрываем и показываем например просто готовую картинку в IE, но без анимации. Но в таком виде как сейчас это не стоит оставлять. Еще раз приношу извинения, если мои слова были непонятны/грубы. 17 ноя 2017 в 19:59
4

CSS решение

Анимация рисования контуров фигур реализуется в этом варианте с помощью правил CSS. Точно также необходимо определить длину пути для каждой фигуры и использовать её для анимации изменения атрибута stroke-dashoffset от максимальной значения до нуля.

Для круга

.circle {
    fill:none;
    stroke:#FEC558;
    stroke-dashoffset:138.5;
    stroke-dasharray:138.5;
    animation: circle_stroke 2s ease-in forwards;
        } 
    
    @keyframes circle_stroke {
    0% {
    stroke-dashoffset: 138.5;
    }
    100% {
    stroke-dashoffset: 0;
      }
    } 

Точно также необходимо повторить для трапеции и треугольника.

Но для этих фигур необходимо добавить ещё анимацию заполнения цветом. Правило CSS для совместной анимации будет написано так:

.trap {
    stroke-dashoffset:60;
    stroke-dasharray:60;
        animation:trap_stroke 2s ease-in-out forwards,  trap_fill  ease-in 3s forwards;
    
    }
    
    @keyframes trap_stroke {
    0% {
    stroke-dashoffset: 60.5;
    }
          
      100% {
    stroke-dashoffset: 0;
      }
    }  
    
    @keyframes trap_fill {
    0% {
    fill: none;
    }
          
      100% {
    fill: #FEC558;
      }
    }  
    

Код для всей анимации:

 .trap, .triangle {
   stroke:#FEC558;
   stroke-width:0.5;
    fill:none;
   }
    
    .circle {
    fill:none;
    stroke:#FEC558;
    stroke-dashoffset:138.5;
    stroke-dasharray:138.5;
    animation: circle_stroke 2s ease-in forwards;
        } 
    
    @keyframes circle_stroke {
    0% {
    stroke-dashoffset: 138.5;
    }
    100% {
    stroke-dashoffset: 0;
      }
    }
    

    
    
    .trap {
    stroke-dashoffset:60;
    stroke-dasharray:60;
        animation:trap_stroke 2s ease-in-out forwards,  trap_fill  ease-in 3s forwards;
    
    }
    
    @keyframes trap_stroke {
    0% {
    stroke-dashoffset: 60.5;
    }
          
      100% {
    stroke-dashoffset: 0;
      }
    }  
    
    @keyframes trap_fill {
    0% {
    fill: none;
    }
          
      100% {
    fill: #FEC558;
      }
    }  


    .triangle {
    stroke-dashoffset:35.5;
    stroke-dasharray:35.5;
    
    animation: triangle_stroke 1s ease-in-out forwards, triangle_fill 3.5s ease-in forwards;
    }  
    
    @keyframes triangle_stroke {
    0% {
    stroke-dashoffset: 35.5;
    }
    100% {
    stroke-dashoffset: 0;
      }
    }  
    
    @keyframes triangle_fill {
    0% {
    fill: none;
    }
    100% {
    fill: #FEC558;;
      }
    }
    
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="30%" height="30%" viewBox="0 0 47.4 47.7" style="enable-background:new 0 0 47.4 47.7;" xml:space="preserve">  

<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%" >
         
            <stop offset="0%" stop-color="#33363D"/>
            <stop offset="100%" stop-color="#5B5D5A"/>
</lineargradient>
</defs> 
<rect width="100%" height="100%" fill="url(#grad)"/>

<path class="circle" d="M23.7,45.8c12.1,0,22-9.9,22-22c0-12.1-9.9-22-22-22c-12.1,0-22,9.9-22,22C1.7,35.9,11.6,45.8,23.7,45.8z"/>

    
       <path class="trap"    d="M14.1,17.9 14.1,20.2 14.1,22.2 14.1,23.4 14.1,24.7 14.1,27.6 32.7,35.2 32.7,32.5 32.7,30.7  32.7,29.7 32.7,28.5 32.7,25.2z" />
          
        <path class="triangle"   d="M19.2,18.7 24.3,20.6 27.5,21.9 27.5,21.2 27.5,19.4 27.5,17.5 27.5,16.3 27.5,15.2 27.5,12.5 15.5,17.2 19.2,18.7"/>
    

</svg>

DEMO

Работает во всех современных браузерах, кроме IE

"IE10 and IE11 do not support CSS keyframe blocks inside media queries."
(см. вкладку Known Issues )

Свободный перевод ответа от участника @Alexandr_TT.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.