Atributo de estilo SVG

El atributo de estilo nos ayuda a diseñar un elemento usando declaraciones CSS. Funciona de forma muy similar al atributo de estilo de HTML. Casi todos los elementos utilizan este atributo.

Sintaxis:

style = "<style>"

Valores de atributo: El atributo de estilo acepta los valores mencionados anteriormente y descritos a continuación.

  • estilo: la sintaxis de los datos de estilo depende del CSS proporcionado.

Los siguientes ejemplos ilustran el uso del atributo de estilo .

Ejemplo 1:

HTML

<!DOCTYPE html>
<html>
  
    <body>
          
        <svg viewBox="-10 -5 1220 520" 
             xmlns="http://www.w3.org/2000/svg">
            <defs>
                <marker id="geek"
                    viewBox="0 0 10 10"
                    refX="1" refY="5"
                    markerUnits="strokeWidth"
                    markerWidth="7"
                    markerHeight="7"
                    orient="auto">
                   <path d="M 0 0 L 10 5 L 0 10 z" 
                    fill="green"/>
                </marker>
            </defs>
  
            <polyline points="20, 20 40, 25 60,
                    40 80, 120 120, 140 200, 180"
                    style="fill:none;stroke:green;
                    stroke-width:3" 
                    marker-end="url(#geek)"/>
          </svg>
    </body>   
</html>

Producción:

Ejemplo 2:

HTML

<!DOCTYPE html>
<html>
  
    <body>
        <svg viewbox="0 0 150 60" 
          xmlns="http://www.w3.org/2000/svg">
          <circle cx="12" cy="12" r="10"
              style="fill: lightgreen; 
              stroke: green; 
              stroke-width: 2;"/>
        </svg>
    </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

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