W3docs
es
Iniciar sesión

Trazado SVG

SVG offers different stroke properties that can be applied to any kind of text, lines and outlines of elements. See some of the stroke properties in use.

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

<!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>
Pruébalo tú mismo »

Ejemplo de la propiedad stroke-linecap:

Ejemplo de la propiedad stroke-linecap

<!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>
Pruébalo tú mismo »

Ejemplo de la propiedad stroke-width:

Ejemplo de la propiedad stroke-width

<!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>
Pruébalo tú mismo »

Ejemplo de la propiedad stroke-dasharray:

Ejemplo de la propiedad stroke-dasharray

<!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>
Pruébalo tú mismo »

Práctica

Práctica

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