¿Cómo animar SVG con imagen de borde usando CSS?

Posted on by Rudeus Greyrat

Los gráficos vectoriales escalables o SVG se utilizan para configurar gráficos basados ​​en vectores para la web. En este artículo, aprenderemos cómo animar un SVG con una imagen de borde usando CSS.

Enfoque: Usando elborder-image , hay un elemento SVG dentro del cual se define un elemento rect para representar un rectángulo de un ancho y alto establecidos. La imagen de borde para este SVG es otro elemento SVG especificado como una URL (localizador uniforme de recursos) para la propiedad de imagen de borde . Esto se puede lograr codificando el SVG de la imagen del borde como un URI de datos. El nuevo elemento SVG de imagen de borde se anima definiendo el CSS en línea para el mismo.

Nota: un URI de datos (identificador uniforme de recursos) es una string codificada en base64 que representa un archivo (es decir, en lugar de especificar la URL del archivo, puede insertar el contenido del archivo en una página web).

Ejemplo 1:

Borde animado SVG:

<svg width="100" height="100" viewBox="00100100" 
    fill="none" xmlns="http://www.w3.org/2000/svg">
    <style>
        path {
            animation: stroke 5s infinite linear;
        }

        @keyframes stroke {
            to {
                stroke-dashoffset: 776;
            }
        }
    </style>

    <linearGradient id="g" x1="0%" y1="0%" x2="0%" 
        y2="100%" stopoffset="0%" stop-color="#24FE41" 
        stopoffset="25%" stop-color="#24FE41" 
        stopoffset="50%" stop-color="#38ef7d" 
        stopoffset="100%" stop-color="#38ef7d">
    </linearGradient>

    <path d="M1.51.5l970l097l-970l0-97" 
        stroke-linecap="square" stroke="url(#g)" 
        stroke-width="3" stroke-dasharray="385" />
</svg>

URI de datos del borde animado SVG:

data:image/svg+xml;charset=utf-8,%3Csvg width=’100′ height=’100′ viewBox=’0 0 100 100′ fill=’none’ xmlns=’http://www.w3. org/2000/svg’%3E %3Cstyle%3Epath%7Banimation:stroke 5s infinite linear%3B%7D%40keyframes stroke%7Bto%7Bstroke-dashoffset:776%3B%7D%7D%3C/style%3E%3ClinearGradient id= ‘g’ x1=’0%25′ y1=’0%25′ x2=’0%25′ y2=’100%25’%3E%3Cstop offset=’0%25′ stop-color=’%2324FE41′ /%3E%3Cstop offset=’25%25′ stop-color=’%2324FE41′ /%3E%3Cstop offset=’50%25′ stop-color=’%2338ef7d’ /%3E%3Cstop offset=’100% 25′ stop-color=’%2338ef7d’ /%3E%3C/linearGradient%3E %3Cpath d=’M1.5 1.5 l97 0l0 97l-97 0 l0 -97′ stroke-linecap=’square’ stroke=’url( %23g)’ ancho de trazo=’3′ trazo-dasharray=’385’/%3E %3C/svg%3E

Nombre de archivo: index.html

HTML

<!DOCTYPE html>
<html>
  
<head>
  
    <!-- jQuery -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
  
    <style>
        body {
            text-align: center;
        }
  
        h1 {
            color: green;
            font-size: 2.5rem;
        }
  
        svg {
            background: green;
            margin: 0 auto;
            border: 12.5px solid black;
            border-image: url(
"data:image/svg+xml;charset=utf-8,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cstyle%3Epath%7Banimation:stroke 5s infinite linear%3B%7D%40keyframes stroke%7Bto%7Bstroke-dashoffset:776%3B%7D%7D%3C/style%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%2324FE41' /%3E%3Cstop offset='25%25' stop-color='%2324FE41' /%3E%3Cstop offset='50%25' stop-color='%2338ef7d' /%3E%3Cstop offset='100%25' stop-color='%2338ef7d' /%3E%3C/linearGradient%3E %3Cpath d='M1.5 1.5 l97 0l0 97l-97 0 l0 -97' stroke-linecap='square' stroke='url(%23g)' stroke-width='3' stroke-dasharray='385'/%3E %3C/svg%3E") 1;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
      
    <svg width="160" height="160">
        <rect width="160" height="160" 
            style="fill: green" />
    </svg>
</body>
  
</html>

Producción:

Ejemplo 2: este ejemplo es bastante similar al ejemplo anterior, pero la única diferencia es que el valor de trazo-raya es simplemente 50 en lugar de 385 , lo que agrega más guiones en la imagen del borde. Además, la animación alterna entre la dirección de avance y la dirección de retroceso.

Borde animado SVG:

<svg width="100" height="100" viewBox="00100100" 
    fill="none" xmlns="http://www.w3.org/2000/svg">
    <style>
        path {
            animation: stroke 5s linear alternate infinite;
        }

        @keyframes stroke {
            to {
                stroke-dashoffset: 776;
            }
        }
    </style>
    <linearGradient id="g" x1="0%" y1="0%" x2="0%" 
        y2="100%" stopoffset="0%" stop-color="#24FE41" 
        stopoffset="25%" stop-color="#24FE41" 
        stopoffset="50%" stop-color="#38ef7d" 
        stopoffset="100%" stop-color="#38ef7d">
    </linearGradient>

    <path d="M1.51.5l970l097l-970l0-97" 
        stroke-linecap="square" stroke="url(#g)" 
        stroke-width="3" stroke-dasharray="50" />
</svg>

URI de datos del borde animado SVG:

data:image/svg+xml;charset=utf-8,%3Csvg width=’100′ height=’100′ viewBox=’0 0 100 100′ fill=’none’ xmlns=’http://www.w3. org/2000/svg’%3E %3Cstyle%3Epath%7Banimation:stroke 5s linear alternativo infinite%3B%7D%40keyframes stroke%7Bto%7Bstroke-dashoffset:776%3B%7D%7D%3C/style%3E%3ClinearGradient id =’g’ x1=’0%25′ y1=’0%25′ x2=’0%25′ y2=’100%25’%3E%3Cstop offset=’0%25′ stop-color=’%2324FE41 ′ /%3E%3Cstop offset=’25%25′ stop-color=’%2324FE41′ /%3E%3Cstop offset=’50%25′ stop-color=’%2338ef7d’ /%3E%3Cstop offset=’100 %25′ stop-color=’%2338ef7d’ /%3E%3C/linearGradient%3E %3Cpath d=’M1.5 1.5 l97 0l0 97l-97 0 l0 -97′ stroke-linecap=’square’ stroke=’url (%23g)’ ancho de trazo=’3′ trazo-dasharray=’50’/%3E %3C/svg%3E

Nombre de archivo: index.html

HTML

<!DOCTYPE html>
<html>
  
<head>
  
    <!-- jQuery -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
  
    <style>
        body {
            text-align: center;
        }
  
        h1 {
            color: green;
            font-size: 2.5rem;
        }
  
        svg {
            background: green;
            margin: 0 auto;
            border: 12.5px solid black;
            border-image: url(
"data:image/svg+xml;charset=utf-8,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cstyle%3Epath%7Banimation:stroke 5s linear alternate infinite%3B%7D%40keyframes stroke%7Bto%7Bstroke-dashoffset:776%3B%7D%7D%3C/style%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%2324FE41' /%3E%3Cstop offset='25%25' stop-color='%2324FE41' /%3E%3Cstop offset='50%25' stop-color='%2338ef7d' /%3E%3Cstop offset='100%25' stop-color='%2338ef7d' /%3E%3C/linearGradient%3E %3Cpath d='M1.5 1.5 l97 0l0 97l-97 0 l0 -97' stroke-linecap='square' stroke='url(%23g)' stroke-width='3' stroke-dasharray='50'/%3E %3C/svg%3E") 1;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <svg width="160" height="160">
        <rect width="160" height="160" 
            style="fill: green" />
    </svg>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por rajatsandhu2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *