3

Estoy tratando de animar un svg pero no entiendo muy bien como funcionan las propiedades stroke-dasharray: 700 (creo que es la que hace que las diferentes secciones del contorno se junten y hagan visible la forma, pero no estoy seguro), pero stroke-dashoffset: 700 no tengo idea como funciona y porque en el ejemplo esta 2 veces en 700 y en el último en cero cual es la función de esta propiedad exactamente, ¿habrá otra manera de animar estos svg o esta es la única?

Gracias por la ayuda

svg path {
     stroke: #000000;
     fill: #000;
     stroke-dasharray: 700;
     opacity: 10;
     animation: animate 1.2s cubic-bezier(0, 0.23, 1, 0.1);
}
 @keyframes animate {
     0% {
         opacity: 0;
         fill: none;
         stroke-dashoffset: 700;
    }
     30% {
         opacity: 3.333;
         fill: none;
         stroke-dashoffset: 700;
    }
     90% {
         fill: none;
         opacity: 6.66666;
    }
     100% {
         opacity: 10;
         fill: #000;
         stroke-dashoffset: 0;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
      <div class="description">
                <!--<h2 class="description-title">Lorem ipsum dolor.</h2>--->
                <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                    viewBox="0 0 207 104" style="enable-background:new 0 0 207 104;" xml:space="preserve">
                <style type="text/css">
                    .st0{fill:#000;stroke:#000000;stroke-miterlimit:10;}
                </style>
                <g>
                    <path class="st0" d="M12.55,96.85C9.98,94.28,8.7,90.87,8.7,86.6c0-3.6,1.1-6.73,3.3-9.4c2.2-2.67,5.17-4,8.9-4
                        c2.87,0,5.22,0.42,7.05,1.25c1.83,0.83,2.75,2.65,2.75,5.45c0,1.2-0.2,2.53-0.6,4c-1.2-1-2.23-1.68-3.1-2.05
                        c-0.87-0.37-1.83-0.55-2.9-0.55c-2.2,0-3.92,0.73-5.15,2.2c-1.23,1.47-1.85,3.2-1.85,5.2c0,2.33,0.7,4.08,2.1,5.25
                        c1.4,1.17,2.97,1.75,4.7,1.75c1.6,0,2.95-0.32,4.05-0.95c1.1-0.63,2.08-1.83,2.95-3.6c0.87-1.77,1.7-4.35,2.5-7.75L49.1,12
                        c-4.47,1.8-7.93,4.57-10.4,8.3c-2.47,3.73-3.7,8.27-3.7,13.6c0,2.47,0.23,4.18,0.7,5.15c0.47,0.97,0.7,1.52,0.7,1.65
                        c-3.6,0-6.28-0.75-8.05-2.25c-1.77-1.5-2.65-3.98-2.65-7.45c0-4.27,1.75-8.42,5.25-12.45c3.5-4.03,7.98-7.3,13.45-9.8
                        C49.87,6.25,55.33,5,60.8,5h4l-15,71c-1.73,8.2-4.6,14.37-8.6,18.5c-4,4.13-9.9,6.2-17.7,6.2C18.77,100.7,15.12,99.42,12.55,96.85z
                        "/>
                    <path class="st0" d="M63.5,76.6c-2.87-2.53-4.3-6.53-4.3-12c0-4.53,0.93-9.57,2.8-15.1c1.87-5.53,4.87-10.32,9-14.35
                        c4.13-4.03,9.33-6.05,15.6-6.05c8.53,0,12.8,5.33,12.8,16v0.1c0.2,0.07,0.57,0.1,1.1,0.1c2.2,0,4.73-0.58,7.6-1.75
                        c2.87-1.17,5.47-2.58,7.8-4.25l0.9,2.7c-1.93,2.07-4.45,3.82-7.55,5.25c-3.1,1.43-6.48,2.45-10.15,3.05
                        c-0.53,6.07-1.9,11.37-4.1,15.9c-2.2,4.53-5.03,8.03-8.5,10.5c-3.47,2.47-7.23,3.7-11.3,3.7C70.27,80.4,66.37,79.13,63.5,76.6z
                        M84,68.65c1.6-1.83,3-4.33,4.2-7.5c1.2-3.17,2.07-6.68,2.6-10.55c-1.8-0.4-2.7-1.8-2.7-4.2c0-2.73,1.03-4.53,3.1-5.4
                        c-0.13-2.2-0.47-3.72-1-4.55c-0.53-0.83-1.47-1.25-2.8-1.25c-2.2,0-4.33,1.6-6.4,4.8c-2.07,3.2-3.73,7.03-5,11.5
                        c-1.27,4.47-1.9,8.4-1.9,11.8c0,3.2,0.37,5.35,1.1,6.45c0.73,1.1,2.07,1.65,4,1.65C80.8,71.4,82.4,70.48,84,68.65z"/>
                    <path class="st0" d="M131.65,77.35c-1.9-2.17-2.85-4.85-2.85-8.05c0-1.4,0.17-2.98,0.5-4.75c0.33-1.77,0.68-3.48,1.05-5.15
                        c0.37-1.67,0.62-2.73,0.75-3.2c0.53-2.33,1.03-4.63,1.5-6.9c0.47-2.27,0.7-4.1,0.7-5.5c0-3.4-1.2-5.1-3.6-5.1
                        c-1.73,0-3.27,0.85-4.6,2.55c-1.33,1.7-2.4,3.92-3.2,6.65L115.1,80h-14.4l14.5-68l14.8-2l-5.4,25.2c3.33-3.73,7.23-5.6,11.7-5.6
                        c3.4,0,6.1,0.93,8.1,2.8c2,1.87,3,4.7,3,8.5c0,1.93-0.23,4.08-0.7,6.45c-0.47,2.37-1.13,5.25-2,8.65
                        c-0.53,2.07-1.02,4.08-1.45,6.05c-0.43,1.97-0.65,3.52-0.65,4.65c0,1.33,0.3,2.37,0.9,3.1c0.6,0.73,1.63,1.1,3.1,1.1
                        c2,0,3.6-0.72,4.8-2.15c1.2-1.43,2.4-3.65,3.6-6.65h4.2c-2.47,7.33-5.32,12.25-8.55,14.75c-3.23,2.5-6.58,3.75-10.05,3.75
                        C136.53,80.6,133.55,79.52,131.65,77.35z"/>
                    <path class="st0" d="M181.7,77.4c-1.6-2.13-2.4-4.83-2.4-8.1c0-1.4,0.17-2.98,0.5-4.75c0.33-1.77,0.68-3.48,1.05-5.15
                        c0.37-1.67,0.62-2.73,0.75-3.2c0.53-2.33,1.03-4.63,1.5-6.9c0.47-2.27,0.7-4.1,0.7-5.5c0-3.4-1.2-5.1-3.6-5.1
                        c-1.73,0-3.27,0.85-4.6,2.55c-1.33,1.7-2.4,3.92-3.2,6.65L165.6,80h-14.4l10.6-50h14.4l-1.1,5.2c3.33-3.73,7.23-5.6,11.7-5.6
                        c3.4,0,6.1,0.93,8.1,2.8c2,1.87,3,4.7,3,8.5c0,1.93-0.23,4.08-0.7,6.45c-0.47,2.37-1.13,5.25-2,8.65
                        c-0.53,2.07-1.02,4.08-1.45,6.05c-0.43,1.97-0.65,3.52-0.65,4.65c0,1.33,0.3,2.37,0.9,3.1c0.6,0.73,1.63,1.1,3.1,1.1
                        c1.6,0,2.7-0.2,3.3-0.6c-0.4,3.4-1.62,5.97-3.65,7.7c-2.03,1.73-4.48,2.6-7.35,2.6C185.86,80.6,183.3,79.53,181.7,77.4z"/>
                </g>
                </svg>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit autem deserunt numquam et reprehenderit, nobis eligendi asperiores quasi animi error eius nam sed aliquam dolorum adipisci incidunt ex assumenda nulla.Minus quae optio illo esse .</p>
                <a href="" id="see-more">Ver mas</a>
            </div>
</body>
</html>

1 respuesta 1

4

La propiedad de css stroke-dashoffset define la ubicación a lo largo de la ruta de un svg donde comenzará el guión de un trazo. Cuanto mayor sea el número, más tarde en esa ruta comenzarán los guiones. En el css que está dos veces porque se quiere que al 30% del tiempo de la animación se mantenga la posición y no comience hasta entonces el desplazamiento del trazo, pero sin embargo si se quiere que comience la cambiar la opacidad.

Un buen ejemplo de uso y explicación de como aplicar stroke-dashoffset lo puedes ver en este enlace que te facilito de CSS-Tricks:

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear alternate infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}
<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="340px" height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333" xml:space="preserve">

  <path class="path" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
    s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
    C46.039,146.545,53.039,128.545,66.039,133.545z"/>
  
</svg>

Espero que haberte podido ayudar con esta explicación y ejemplo.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.