El SVG ofrece varias propiedades de trazo para aplicar al elemento SVG. Hay muchas propiedades en las propiedades de trazo que se pueden aplicar a cualquier tipo de líneas, texto y contornos de elementos como un círculo.
Sintaxis:
<elementName stroke="stroke color"
stroke-width="Width of the stroke"
stroke-linecap="Ending style to a stroke"
stroke-dasharray="make a dashed stroke">
El valor de la propiedad:
- trazo: establece el trazo en un elemento.
- ancho de trazo: establece el ancho de trazo de un elemento.
- stroke-linecap: establece el estilo de trazo final.
- stroke-dasharrray: establece el estilo de un trazo, como un trazo discontinuo.
A continuación se dan algunos ejemplos:
Ejemplo 1: propiedad Stroke y stroke-dasharray:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Stroke and stroke-dasharray property</title>
</head>
<style>
svg{
background-color: green;
}
</style>
<body>
<p>stroke: </p>
<svg width="100px" height="100px">
<circle cx="50" cy="50" r="40"
stroke="yellow"/>
</svg>
<p>stroke-dasharray: </p>
<svg width="100px" height="100px">
<circle cx="50" cy="50" r="40"
stroke-dasharray=5
stroke="yellow"/>
</svg>
</body>
</html>
Producción:
Ejemplo 2: propiedad stroke-width y stroke-linecap:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>stroke-width and stroke-linecap property</title>
</head>
<style>
svg{
background-color: green;
}
.cls{
display: flex;
}
.cl{
margin:40px;
}
</style>
<body>
<div class="cls">
<div class="cl">
<p>stroke-width: </p>
<svg width="100px" height="100px">
<circle cx="50" cy="50" r="40"
stroke-width=5
stroke="yellow"/>
</svg>
</div>
<div class="cl">
<p>stroke-linecap: round </p>
<svg width="100px" height="100px">
<circle cx="50" cy="50" r="40"
stroke-width=5
stroke-linecap="round"
stroke-dasharray=5
stroke="yellow"/>
</svg>
</div>
<div class="cl">
<p>stroke-linecap:square </p>
<svg width="100px" height="100px">
<circle cx="50" cy="50" r="40"
stroke-width=3
stroke-linecap="square"
stroke-dasharray=5
stroke="yellow"/>
</svg>
</div>
</div>
</body>
</html>
Producción:
Navegadores compatibles:
- Cromo
- Borde
- Ópera
- explorador de Internet
- Safari
- Firefox