Propiedad stroke de CSS

La propiedad stroke pinta a lo largo del contorno del elemento gráfico proporcionado.

Las propiedades fill y stroke especifican la pintura utilizada para renderizar el interior y el trazo alrededor de las formas y el texto.

Puedes encontrar colores web en la sección Colores HTML.

Los estilos en línea anulan los atributos de presentación. Por ejemplo, un estilo en línea como <path style="stroke: #1c87c9;" ... /> tiene prioridad sobre un atributo de presentación como <path stroke="#1c87c9" ... />.

INFO

La propiedad stroke se puede utilizar tanto como propiedad CSS como atributo de presentación. Se puede aplicar a cualquier elemento, pero solo tendrá efecto en los siguientes elementos: <altGlyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref> y <tspan>.

Valor inicial	none
Se aplica a	Elementos de formas y contenido de texto.
Heredable	Sí.
Animable	No.
Versión	Especificación SVG 1.1
Sintaxis DOM	Object.stroke = "#1c87c9";

Sintaxis

Sintaxis CSS de stroke

css

stroke: color | url | none | context-fill | context-stroke | initial | inherit;

Ejemplo de la propiedad stroke:

Ejemplo de código CSS de stroke

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke property example</h2>
    <svg height="100" width="500">
      <g fill="none">
        <path stroke="#8ebf42" d="M5 20 l215 0" />
        <path stroke="#1c87c9" d="M5 40 l215 0" />
        <path stroke="#666666" d="M5 60 l215 0" />
      </g>
    </svg>
  </body>
</html>

Try it Yourself »

Resultado

example

Ejemplo de la propiedad stroke con la etiqueta `<svg>`:

Otro ejemplo de código CSS de stroke

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke property example</h2>
    <svg viewBox="5 5 100 100">
      <style>
        path {
          fill: none;
          stroke-width: 3px;
          marker: url(#diamond);
        }
      </style>
      <path d="M 10,50 v -20 h 40 v -20" stroke="#666" />
      <path d="M 30,70 v -20 h 40 v -20" stroke="#8ebf42" />
      <path d="M 50,90 v -20 h 40 v -20" stroke="#1c87c9" />
      <marker id="diamond" markerWidth="12" markerHeight="12" refX="6" refY="6" markerUnits="userSpaceOnUse">
        <circle cx="6" cy="6" r="3" fill="#000" stroke="#ccc" stroke-width="1.5" />
      </marker>
    </svg>
  </body>
</html>

Try it Yourself »

Valores

Valor	Descripción
none	No se aplica pintura.
color	Establece un color sólido. Se pueden usar nombres de colores, códigos hexadecimales, rgb(), rgba(), hsl(), hsla().
url	Referencia URL a un elemento de servidor de pintura que define un servidor de pintura.
context-fill	Usa el valor de fill de un elemento de contexto.
context-stroke	Usa el valor de stroke de un elemento de contexto.
initial	Hace que la propiedad use su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Cuál es el propósito de la propiedad CSS 'stroke' y cómo se utiliza?

La propiedad 'stroke' se utiliza para establecer el color del borde de una forma SVG.La propiedad 'stroke' se utiliza para establecer el color de fondo de una página web.La propiedad 'stroke' se puede aplicar a elementos HTML como un 'div' o 'section'.La propiedad stroke acepta varios valores como nombres de colores, códigos hexadecimales, rgb, rgba, hsl, hsla y palabras clave de color.'stroke' es una propiedad abreviada para stroke-width, stroke-linejoin y stroke-linecap.

Propiedad stroke de CSS ​

Sintaxis ​

Ejemplo de la propiedad stroke: ​

Resultado ​

Ejemplo de la propiedad stroke con la etiqueta <svg>: ​

Valores ​