Trazado SVG

Descripción de las propiedades de trazo

SVG ofrece diferentes propiedades de trazo que se pueden aplicar a cualquier tipo de texto, líneas y contornos de elementos. Permiten controlar varios aspectos de un trazo. Estas son algunas propiedades de trazo:

stroke para especificar el color de una línea, contorno o texto de un elemento,
stroke-linecap para especificar cómo se representan los extremos de una línea SVG,
stroke-width para especificar el grosor de una línea, contorno o texto de un elemento,
stroke-dasharray para especificar líneas discontinuas.

Ejemplo de la propiedad stroke:

Ejemplo de la propiedad stroke

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="100" >
      <g fill="none">
        <path stroke="purple" d="M5 30 l215 0" />
        <path stroke="lightgreen" d="M5 60 l215 0" />
        <path stroke="pink" d="M5 90 l215 0" />
      </g>
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Try it Yourself »

Ejemplo de la propiedad stroke-linecap:

Ejemplo de la propiedad stroke-linecap

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="100">
      <g fill="none" stroke="lightblue" stroke-width="10">
        <path stroke-linecap="butt" d="M5 30 l215 0" />
        <path stroke-linecap="round" d="M5 60 l215 0" />
        <path stroke-linecap="square" d="M5 90 l215 0" />
      </g>
    </svg>
  </body>
</html>

Try it Yourself »

Ejemplo de la propiedad stroke-width:

Ejemplo de la propiedad stroke-width

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="100">
      <g fill="none" stroke="lightgreen">
        <path stroke-width="3" d="M5 30 l215 0" />
        <path stroke-width="5" d="M5 60 l215 0" />
        <path stroke-width="7" d="M5 90 l215 0" />
      </g>
    </svg>
  </body>
</html>

Try it Yourself »

Ejemplo de la propiedad stroke-dasharray:

Ejemplo de la propiedad stroke-dasharray

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="100">
      <g fill="none" stroke="orange" stroke-width="5">
        <path stroke-dasharray="3,5" d="M5 30 l215 0" />
        <path stroke-dasharray="12,12" d="M5 60 l215 0" />
        <path stroke-dasharray="30,15,10,10,10,15" d="M5 90 l215 0" />
      </g>
    </svg>
  </body>
</html>

Try it Yourself »

Práctica

¿Cuáles de las siguientes afirmaciones son verdaderas sobre el trazo SVG en HTML?

La propiedad stroke se usa para establecer el color de una forma SVG.La propiedad stroke-width se usa para establecer el ancho del trazo en una forma SVG.La propiedad stroke-dasharray se usa para establecer o quitar líneas discontinuas en una forma SVG.La propiedad stroke-linecap se usa para especificar el color de las esquinas en una forma SVG.La propiedad stroke-linejoin se usa para especificar la forma que se utilizará en las esquinas de los trazados cuando se les aplica trazo.La propiedad stroke-opacity se usa para aumentar el ancho del trazo en una forma SVG.

Trazado SVG ​

Descripción de las propiedades de trazo ​

Ejemplo de la propiedad stroke: ​

Ejemplo de la propiedad stroke-linecap: ​

Ejemplo de la propiedad stroke-width: ​

Ejemplo de la propiedad stroke-dasharray: ​

Práctica ​

Trazado SVG

Descripción de las propiedades de trazo

Ejemplo de la propiedad stroke:

Ejemplo de la propiedad stroke-linecap:

Ejemplo de la propiedad stroke-width:

Ejemplo de la propiedad stroke-dasharray:

Práctica