如何动画SVG多边形来填充？

Question

I have a SVG letter (A) that consists of two polygon and a rectangle. I want to animate them in a way that the first polygon grows to visible and then the second one . After that, the rectangle will grow to be visible. Before the start of the animation, the SVG will not be visible.

I have tried keyframe strokes but as they are not path based but points of polygon, it didn't work.

 <svg height="600" width="800"> <polygon points="34 537,150 536,289 130,314 53,196 51"/> <animate attributeName="points" dur="5s" fill="freeze" /> <polygon points="411 537,528 537,364 118,354 91,348 72,341 53,327 53,223 55"/> <rect x="120" y="320" stroke-miterlimit="10" width="270" height="120"/> </svg> 

Here is a pen if you want to work on it : https://codepen.io/anon/pen/vMxXaP

Answer 1

You can still draw the (A) letter by using polygons with stroke instead of fill. The following example uses two keyframe animations on stroke-dasharray to draw the A letter in two steps :

1. First step for the top left and top right line (first polygon element in the svg)
2. Second step for the horizontal line closing the A (second polygon in the svg element)

 .letter { width:200px;height:auto; stroke-width:2.5; stroke:#000; fill:none; stroke-dasharray: 0 24; } .animateFirst { animation: 0.5s animateFirst ease-in forwards; } .animateSecond { animation: 0.2s 0.45s animateSecond ease-out forwards; } @keyframes animateFirst { to { stroke-dasharray: 24 24; } } @keyframes animateSecond { to { stroke-dasharray: 6 24; } } 

 <svg class="letter" viewbox="0 0 12 10"> <polygon class="animateFirst" points="1,11.5 6,0 11,11.5" /> <polygon class="animateSecond" points="3,6.5 9,6.5" /> </svg> 

Answer 2

SVG solution

Rotation and appearance animation

 .container { width:35%; height:35%; } 

 <div class="container"> <svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 800"> <g fill="black" fill-opacity="0" > <polygon id="left" transform="rotate(72 306 200)" points="34 537,150 536,289 130,314 53,196 51"> <animateTransform attributeName="transform" type="rotate" values="72 306 200;0 306 200" begin="svg1.click" dur="0.5s" fill="freeze" /> <animate id="an_op1" attributeName="fill-opacity" from="0" to="1" begin="svg1.click" dur="0.5s" fill="freeze" /> </polygon> <polygon id="right" transform="rotate(-69 457.5 200)" points="411 537,528 537,364 118,354 91,348 72,341 53,327 53,223 55"> <animateTransform attributeName="transform" type="rotate" values="-69 457.5 200;0 457.5 200" begin="an_op1.end" dur="0.5s" fill="freeze" /> <animate id="an_op2" attributeName="fill-opacity" from="0" to="1" begin="an_op1.end" dur="0.5s" fill="freeze" /> </polygon> <rect id="rect1" x="800" y="320" width="270" height="120"> <animate attributeName="x" from="800" to="120" begin="an_op2.end" dur="0.5s" fill="freeze" /> <animate id="an_op3" attributeName="fill-opacity" from="0" to="1" begin="an_op2.end" dur="0.5s" fill="freeze" /> </rect> </g> <text x="0" y="80" font-size="50" fill="purple">Click me</text> </svg> </div> 

Second solution

All animation elements are invisible at the beginning. fill-opacity="0"

Item appearance Animation:

<animate
      id="an_left"
      attributeName="fill-opacity"
      begin="1s"
      from="0"
      to="1"
      dur="0.3s"
      fill="freeze"/>

Below is the full code:

 .container { width:35%; height:35%; } 

 <div class="container"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 800"> <polygon id="right" fill="#008080" fill-opacity="0" points="411 537,528 537,364 118,354 91,348 72,341 53,327 53,223 55"> <animate id="an_right" attributeName="fill-opacity" begin="an_left.end" from="0" to="1" dur="0.3s" fill="freeze"/> </polygon> <polygon id="left" fill="#008080" fill-opacity="0" points="34 537,150 536,289 130,314 53,196 51"> <animate id="an_left" attributeName="fill-opacity" begin="0.2s" from="0" to="1" dur="0.3s" fill="freeze"/> </polygon> <rect x="120" y="320" fill="#008080" fill-opacity="0" stroke-miterlimit="10" width="270" height="120"> <animate id="an_rect" attributeName="fill-opacity" from="0" to="1" begin="an_right.end" dur="0.3s" fill="freeze"/> </rect> </svg> </div> 

The sequence of animations is achieved by a chain of conditions in the attribute - begin="an_left.end"

Such a record means that the animation of the right rectangle will begin only after the end of the animation of the left polygon.

CSS solution

 .container { width:35%; height:35%; } #left,#right, #rect1 { fill-opacity:0; fill:#008080; } #left { animation:anLeft 0.3s ease forwards; animation-delay: 0.1s; } @keyframes anLeft { 100% { fill-opacity:1; } } #right { animation:anRight 0.3s ease forwards; animation-delay: 0.4s; } @keyframes anRight { 100% { fill-opacity:1; } } #rect1 { animation:anRect 0.3s ease forwards; animation-delay:0.7s; } @keyframes anRect { 100% { fill-opacity:1; } } 

 <div class="container"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 800"> <polygon id="right" points="411 537,528 537,364 118,354 91,348 72,341 53,327 53,223 55"/> <polygon id="left" points="34 537,150 536,289 130,314 53,196 51"/> <rect id="rect1" x="120" y="320" stroke-miterlimit="10" width="270" height="120"/> </svg> </div> 

Answer 3

I solved this using CSS keyframes, is this what you're looking for?

  @keyframes fade { from { opacity: 0; } to { opacity: 1; } } #right { animation-delay: 1s; } #center { animation-delay: 2s; } .shape { opacity: 0; animation-fill-mode: forwards; animation-iteration-count: 1; animation-name: fade; animation-duration: 1s; } 

 <svg id="abcdef" height="600" width="800"> <polygon class="shape" points="34 537,150 536,289 130,314 53,196 51"/> <polygon id="right" class="shape" points="411 537,528 537,364 118,354 91,348 72,341 53,327 53,223 55"/> <rect id="center" class="shape" x="120" y="320" filter="#008080" stroke-miterlimit="10" width="270" height="120"/> </svg> 

If you want to tweak the duration of the animation you have to look at changing the values of animation-delay and animation-duration .

Answer 4

Here an example with pure javascript and changing opacity by delta time

 let left = document.querySelector('#left') let right = document.querySelector('#right') let rect1 = document.querySelector('#rect1') let time = 3000; // animation time let delay = 1000; // animation delay // dt - time from animation start function animate(dt) { let v = dt - delay; opacity(left, v/time*3); opacity(right, v/time*3 - 1); opacity(rect1, v/time*3 - 2); dt < time + delay + 50 && requestAnimationFrame(animate) } function opacity(el, v) { v = Math.min(1, Math.max(v, 0)); // clamp to 0-1 el.setAttribute('opacity', v) } requestAnimationFrame(animate); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="175" viewBox="0 0 600 800"> <g fill="#008080"> <polygon id="right" opacity="0" points="411 537,528 537,364 118,354 91,348 72,341 53,327 53,223 55"/> <polygon id="left" opacity="0" points="34 537,150 536,289 130,314 53,196 51"/> <rect id="rect1" opacity="0" x="120" y="320" stroke-miterlimit="10" width="270" height="120"/> </g> </svg> 

Answer 5

Bonus version. Here i turned your paths into mask and added background animation.

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 800"> <style> svg { height:160px; background: url(https://i.imgur.com/Pr8tfnT.png); background-position: 0px 111px; background-repeat: repeat-x; background-size: 100%; animation: water 10s forwards; } @keyframes water { 100% { background-position: 2000px 0px; } } </style> <mask id="mask" fill="black"> <rect fill="white" width="600" height="800"/> <polygon id="right" points="411 537,528 537,364 118,354 91,348 72,341 53,327 53,223 55"/> <polygon id="left" points="34 537,150 536,289 130,314 53,196 51"/> <rect id="rect1" x="120" y="320" stroke-miterlimit="10" width="270" height="120"/> </mask> <rect fill="white" width="600" height="800" mask="url(#mask)"/> </svg> 

Answer 6

You can indeed use keyframes, in there there a lot of things to do besides just the opacity. You can animate drawing the outlines with stroke-dashoffset and stroke-dasharray . There are also ways to let them fade in from let and right with translateX or translateY . Also rotation animations. take a look at the css in the pen i made: https://codepen.io/YilmazTut/pen/JzaQEy .

there also is a series on svg's from css tricks: https://css-tricks.com/lodge/svg/ i used that to create the logo in my pen. from about tutorial 16 he explains how animations and later on also pathdrawing works. I hope you can find your way there!