En SVG (gráficos vectoriales escalables), la propiedad <stroke> se utiliza para definir el contorno de una forma. A menudo se usa junto con <path> , <rect> , <circle> y otros elementos SVG para especificar el color, el ancho y el estilo del trazo. A continuación se muestran algunas formas de utilizar la propiedad de trazo en SVG:

1. Trazo básico: el uso más básico de la propiedad de trazo es definir el color del trazo. Puede utilizar el atributo stroke para establecer el color. Por ejemplo:

    XML
    <circle cx="50" cy="50" r="40" stroke="black" />
   

   En este ejemplo, el elemento <circle> tendrá un trazo negro.

2. Ancho del trazo: puede utilizar el atributo stroke-width para establecer el ancho del trazo. Por ejemplo:

    XML
    <rect x="10" y="10" width="80" height="80" stroke="blue" stroke-width="3" />
   

   Este rectángulo tendrá un trazo azul con un ancho de 3 unidades.

3. Opacidad del trazo: puedes controlar la opacidad del trazo usando el atributo stroke-opacity . Toma un valor entre 0 (completamente transparente) y 1 (completamente opaco). Por ejemplo:

    XML
    <line x1="10" y1="10" x2="90" y2="90" stroke="red" stroke-width="2" stroke-opacity="0.7" />
   

   Esta línea tendrá un trazo rojo con un 70% de opacidad.

4. Stroke Dasharray: el atributo stroke-dasharray le permite crear trazos discontinuos o punteados. Puede especificar una serie de valores para controlar la longitud de los guiones y los espacios. Por ejemplo:

    XML
    <line x1="10" y1="50" x2="90" y2="50" stroke="green" stroke-width="2" stroke-dasharray="5,3" />
   

   Esta línea tendrá un trazo discontinuo verde con un trazo de longitud 5 y un espacio de longitud 3.

5. Tapa de línea de trazo: el atributo stroke-linecap define la forma utilizada para dibujar los puntos finales de un trazo. Puede tomar valores como butt , round o square . Por ejemplo:

    XML
    <line x1="20" y1="20" x2="80" y2="80" stroke="purple" stroke-width="5" stroke-linecap="round" />
   

   Esta línea tendrá un trazo morado con extremos redondeados.

Estos son sólo algunos ejemplos de cómo puedes utilizar la propiedad de trazo en SVG. Experimente con estas propiedades y valores para lograr los efectos visuales deseados para los trazos en sus gráficos SVG.