CSS | Propiedad de ancho de trazo

La propiedad de ancho de trazo se usa para establecer el ancho de un borde en una forma SVG. Esta propiedad solo se puede aplicar a elementos que tienen forma o son elementos de contenido de texto.

Sintaxis:

stroke-width: <length> | <percentage>

Valores de propiedad:

longitud: Se utiliza para establecer el ancho del trazo en unidades de medida. Puede tomar valores en números enteros o decimales en porcentajes.
No es necesario que un valor tenga un identificador de unidad como ‘px’ o ‘em’. El valor sin unidades se basará en el sistema de coordenadas del cuadro de vista SVG.

Ejemplo 1: este ejemplo establece el ancho del trazo sin unidades.

<!DOCTYPE html>
<html>
      
<head>
    <title>CSS | stroke-width</title>
      
    <style>
        .stroke1 {
            stroke-width: 10;
            stroke: green;
        }
        .stroke2 {
            stroke-width: 30;
            stroke: red;
        }
        .stroke3 {
            stroke-width: 50;
            stroke: orange;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>CSS | stroke-width</b>
      
    <div class="container">
        <svg height="300px" width="400px"
            xmlns="http://www.w3.org/2000/svg">
            <line class="stroke1" x1="0" x2="250"
                y1="20" y2="20" />
            <line class="stroke2" x1="0" x2="250"
                y1="90" y2="90" />
            <line class="stroke3" x1="0" x2="250"
            y1="200" y2="200" />
        </svg>
    </div>
</body>
  
</html>

Producción:
width-no-units

Ejemplo 2: este ejemplo establece el ancho del trazo en píxeles.

<!DOCTYPE html>
<html>
      
<head>
    <title>CSS | stroke-width</title>
      
    <style>
        .stroke1 {
            stroke-width: 5px;
            stroke: green;
        }
        .stroke2 {
            stroke-width: 10px;
            stroke: red;
        }
        .stroke3 {
            stroke-width: 20px;
            stroke: orange;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>CSS | stroke-width</b>
      
    <div class="container">
        <svg height="300px" width="400px"
            xmlns="http://www.w3.org/2000/svg">
            <circle class="stroke1" cx="60"
                cy="50" r="25"/>
            <circle class="stroke2" cx="60"
                cy="150" r="25"/>
            <circle class="stroke3" cx="60"
                cy="250" r="25"/>
        </svg>
    </div>
</body>
  
</html>

Producción:
width-pixels

porcentaje: Se utiliza para establecer el ancho del trazo en porcentaje.

Ejemplo:

<!DOCTYPE html>
<html>
      
<head>
    <title>CSS | stroke-width</title>
      
    <style>
        .stroke1 {
            stroke-width: 1%;
            stroke: green;
        }
        .stroke2 {
            stroke-width: 2%;
            stroke: red;
        }
        .stroke3 {
            stroke-width: 3%;
            stroke: orange;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>CSS | stroke-width</b>
      
    <div class="container">
        <svg height="300px" width="400px"
            xmlns="http://www.w3.org/2000/svg">
            <ellipse class="stroke1" cx="100"
                cy="50" rx="35" ry="25" />
            <ellipse class="stroke2" cx="100"
                cy="150" rx="35" ry="25" />
            <ellipse class="stroke3" cx="100"
                cy="250" rx="35" ry="25" />
        </svg>
    </div>
</body>
  
</html>

Producción:
width-percentage

Navegadores compatibles: los navegadores compatibles con la propiedad de ancho de trazo se enumeran a continuación:

Cromo
Firefox
Safari
Ópera
explorador de Internet 9

Publicación traducida automáticamente

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

Deja una respuesta Cancelar la respuesta