El atributo stroke-linecap define la forma del trazo que se utilizará al final del subtrayecto abierto. Este es el atributo de presentación.
Sintaxis:
stroke-linecap="shapes"
Valores de atributos:
- tope: este valor de atributo indica que el trazo no se extiende más allá de sus dos puntos finales.
- redondo: este valor de atributo indica que el trazo se extenderá en un semicírculo con un diámetro igual al ancho del trazo en sus puntos finales.
- cuadrado: este valor de atributo indica que el trazo se extenderá por un rectángulo en sus puntos finales.
Usaremos el atributo stoke-linecap para definir la forma del trazo.
Ejemplo 1:
<!DOCTYPE html> <html> <body> <svg viewBox="0 0 35 30" xmlns="http://www.w3.org/2000/svg"> <line x1="1" y1="1" x2="5" y2="1" stroke="black" stroke-linecap="butt" /> </svg> </body> </html>
Producción:
Ejemplo 2:
<!DOCTYPE html> <html> <body> <svg viewBox="0 0 35 30" xmlns="http://www.w3.org/2000/svg"> <line x1="1" y1="3" x2="5" y2="3" stroke="black" stroke-linecap="round" /> </svg> </body> </html>
Producción:
Ejemplo 3:
<!DOCTYPE html> <html> <body> <svg viewBox="0 0 35 30" xmlns="http://www.w3.org/2000/svg"> <line x1="1" y1="5" x2="5" y2="5" stroke="black" stroke-linecap="square" /> </svg> </body> </html>
producción:
