Atributo de tipo SVG – Barcelona Geeks

El atributo de tipo es un atributo no específico que tiene un significado diferente según el contexto en el que se utilice.

Define el tipo de transformación, para el elemento < animateTransform > cuyos valores cambian con el tiempo.
Define el tipo de operación matricial, para el elemento < feColorMatrix >.
Define el tipo de función de transferencia del componente, para los elementos <feFuncG>, <feFuncB>, <feFuncR> y <feFuncA> .
Define si la primitiva de filtro debe realizar una función de turbulencia o ruido, para el elemento <feTurbulence> .
Define el tipo de contenido del elemento, para los elementos <style> y <script> .

Sintaxis:

type = "value"

Valores de atributo: el atributo de tipo se puede utilizar con los siguientes elementos:

<animateTransform>: este elemento incluye atributo de tipo con valores como traducir, escalar, rotar, sesgarX, sesgarY.
<feColorMatrix>: este elemento incluye un atributo de tipo con valores como matrix, saturate, hueRotate, luminanceToAlpha.
<feTurbulence>: Este elemento incluye atributo de tipo con valores como fractalNoise, turbulence.
<feFuncR>, <feFuncG>, <feFuncB> y <feFuncA>: estos elementos incluyen atributos de tipo con valores como identidad, tabla, discreto, lineal, gamma.

Los siguientes ejemplos ilustran el uso del atributo de tipo .

Ejemplo 1:

<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
  
    <svg width="320" height="320" 
        viewBox="20 30 120 120" 
        xmlns="http://www.w3.org/2000/svg">
  
        <polygon points="60, 30 90, 90 30, 90" fill="green">
  
            <animateTransform attributeName="transform" 
                attributeType="XML" type="rotate" 
                from="0 60 70" to="360 60 70"
                dur="5s" repeatCount="indefinite" />
        </polygon>
    </svg>
</body>
  
</html>

Producción:

Ejemplo 2:

<!DOCTYPE html>
<html>
  
<body>
    <div style="color: green; 
             margin-left: 50px;">
  
        <h1>GeeksforGeeks</h1>
  
        <svg viewBox="0 0 480 100" 
            xmlns="http://www.w3.org/2000/svg">
  
            <filter id="geek2" x="-20%" y="-20%" 
                width="150%" height="150%">
                  
                <feTurbulence type="turbulence" 
                    baseFrequency="0.05" numOctaves="5"
                    result="turbulence" />
                  
                <feDisplacementMap in2="turbulence" 
                    in="SourceGraphic" scale="20" />
            </filter>
  
            <polygon points="50, 9 60.5, 39.5 92.7, 
                40.1 67, 59.5 76.4, 90.3 50, 71.9 
                23.6, 90.3 32.9, 59.5 7.2, 40.1 39.4, 
                39.5" style="filter: url(#geek2);"
                fill="hsl(106, 80%, 50%)" />
        </svg>
    </div>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

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

Deja una respuesta Cancelar la respuesta