CSS | propiedad trazo-linejoin

La propiedad stroke-linejoin es una propiedad incorporada que se usa para definir la forma que se usa para finalizar un subtrayecto abierto de un trazo.

Sintaxis:

stroke-linejoin: miter | miter-clip | round | bevel | arcs | initial | inherit

Valores de propiedad:

mitra: Se utiliza para indicar que se utilizaría una esquina aguda para unir los dos extremos. Los bordes exteriores del trazo se extienden a las tangentes de los segmentos de ruta hasta que se cruzan. Esto le da al final una esquina aguda.

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | stroke-linejoin property
    </title>
    <style>
        .stroke1 {
            stroke-linejoin: miter;
            stroke-width: 20px;
            stroke: green;
            fill: none;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
        <b>
            CSS | stroke-linejoin: miter;
        </b>
        <div class="container">
            <svg width="400px"
                 height="200px" 
                 xmlns="http://www.w3.org/2000/svg"
                 version="1.1">
                <rect x="153" y="25" 
                      width="100" 
                      height="100" 
                      class="stroke1" />
            </svg>
        </div>
    </center>
</body>
  
</html>

Producción:
miter

mitre-clip: Se utiliza para indicar que se utilizaría una esquina afilada para unir los dos extremos. Los bordes exteriores del trazo se extienden a las tangentes de los segmentos de ruta hasta que se cruzan.

Le da al final una esquina afilada como el valor de inglete excepto otra propiedad. El límite de inglete de trazo se usa para determinar si el inglete se recortaría si supera cierto valor. Se utiliza para proporcionar un inglete más atractivo en uniones o animaciones muy nítidas.

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | stroke-linejoin property
    </title>
    <style>
        .stroke1 {
            stroke-linejoin: miter-clip;
            
            /* setting a lower miterlimit */
            stroke-miterlimit: 1;
            stroke-width: 20px;
            stroke: green;
            fill: none;
        }
          
        .stroke2 {
            stroke-linejoin: miter-clip;
            
            /* setting a higher miterlimit */
            stroke-miterlimit: 2;
            stroke-width: 20px;
            stroke: green;
            fill: none;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
  
        <b>
            CSS | stroke-linejoin: miter-clip;
        </b>
        <div class="container">
            <svg width="400px" 
                 height="200px" 
                 xmlns="http://www.w3.org/2000/svg" 
                 version="1.1">
                <rect x="80" y="25" 
                      width="100" 
                      height="100" 
                      class="stroke1" />
                <rect x="220" y="25"
                      width="100" 
                      height="100" 
                      class="stroke2" />
            </svg>
        </div>
    </center>
</body>
  
</html>

Producción:

redondo: Se utiliza para indicar que la esquina redondeada serviría para unir los dos extremos.

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | stroke-linejoin property
    </title>
    <style>
        .stroke1 {
            stroke-linejoin: round;
            stroke-width: 20px;
            stroke: green;
            fill: none;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
        <b>
            CSS | stroke-linejoin: round;
        </b>
        <div class="container">
            <svg width="400px" 
                 height="200px" 
                 xmlns="http://www.w3.org/2000/svg" 
                 version="1.1">
                <rect x="153" y="25" 
                      width="100" 
                      height="100" 
                      class="stroke1" />
            </svg>
        </div>
    </center>
</body>
  
</html>

Producción:
round

bisel: Se utiliza para indicar que el punto de conexión se recorta perpendicularmente a la junta.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | stroke-linejoin property
    </title>
    <style>
        .stroke1 {
            stroke-linejoin: bevel;
            stroke-width: 20px;
            stroke: green;
            fill: none;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
  
        <b>CSS | stroke-linejoin: bevel;</b>
  
        <div class="container">
            <svg width="400px" height="200px" 
                 xmlns="http://www.w3.org/2000/svg" 
                 version="1.1">
                <rect x="152" y="25" 
                      width="100" 
                      height="100" 
                      class="stroke1" />
            </svg>
        </div>
    </center>
</body>
  
</html>

Producción:
bevel

arcos: Se utiliza para indicar que se utilizará una esquina de arcos para unir segmentos de trayectoria. Esta forma está formada por la extensión de los bordes exteriores del trazo que tienen la misma curvatura que los bordes exteriores en el punto en que se unen.

initial: Se utiliza para establecer la propiedad en su valor predeterminado.

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | stroke-linejoin
    </title>
    <style>
        .stroke1 {
            stroke-linejoin: initial;
            stroke-width: 20px;
            stroke: green;
            fill: none;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
        <b>
            CSS | stroke-linejoin: initial;
        </b>
        <div class="container">
            <svg width="400px" 
                 height="200px" 
                 xmlns="http://www.w3.org/2000/svg"
                 version="1.1">
                <rect x="153" y="25" 
                      width="100"
                      height="100"
                      class="stroke1" />
            </svg>
        </div>
    </center>
</body>
  
</html>

Producción:
initial

heredar: se utiliza para establecer la propiedad para heredar de su padre.

Navegadores compatibles: los navegadores compatibles con la propiedad stroke-linejoin se enumeran a continuación:

Cromo
explorador de Internet 9
Firefox
Safari
Ópera

Nota: No stroke-linejoin: arcs;es compatible con ninguno de los principales navegadores.

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