Patrón SVGContentUnits Atributo

El atributo patternContentUnits se utiliza para indicar qué sistema de coordenadas se debe utilizar para el contenido del elemento < patrón >.

Sintaxis:

patternContentUnits ="userSpaceOnUse"

// Or 

patternContentUnits ="objectBoundingBox"

Valores de atributo: el atributo patternContentUnits acepta los valores mencionados anteriormente y descritos a continuación:

userSpaceOnUse: indica que todas las coordenadas dentro del elemento <patrón> se refieren al sistema de coordenadas del usuario tal como se definió cuando se creó el mosaico del patrón.
objectBoundingBox: Indica que todas las coordenadas dentro del elemento <patrón> son valores en fracciones o porcentajes del cuadro delimitador del elemento <patrón> .

Nota: el valor predeterminado es userSpaceOnUse .

Ejemplo 1: a continuación se muestra el ejemplo que ilustra el uso del atributo patternContentUnits utilizando el valor objectBoundingBox .

HTML

<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color: green; 
        margin-left: 2%;">
        GeeksforGeeks
    </h1>
  
    <svg viewBox="0 0 300 200" 
        xmlns="http://www.w3.org/2000/svg">
          
        <pattern id="geek2" width="40%" 
            height="40%" fill="green" 
            patternContentUnits="objectBoundingBox">
              
            <ellipse cx=".2" cy=".1" rx=".2" ry=".1" />
        </pattern>
          
        <rect width="50" height="50" 
            fill="url(#geek2)" />
    </svg>
</body>
  
</html>

Salida: a continuación se muestra la salida generada correspondiente al código anterior

Ejemplo 2: a continuación se muestra el ejemplo que ilustra el uso del atributo patternContentUnits utilizando el valor userSpaceOnUse .

HTML

<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
  
    <svg viewBox="0 0 200 200" 
        xmlns="http://www.w3.org/2000/svg">
          
        <pattern id="geek2" width="40%" 
            height="40%" fill="green" 
            patternContentUnits="userSpaceOnUse">
              
            <ellipse cx="5" cy="5" rx="2" ry="1" />
        </pattern>
          
        <rect width="50" height="50" 
            fill="url(#geek2)" />
    </svg>
</body>
  
</html>

Salida: a continuación se muestra la salida generada correspondiente al código anterior

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

HTML

HTML

Deja una respuesta Cancelar la respuesta