W3docs
es
Iniciar sesión

Propiedad stroke de CSS

How to use the stroke CSS property to paint the outline of the element. Read about the property and see the values with examples.

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 inicialnone
Se aplica aElementos de formas y contenido de texto.
HeredableSí.
AnimableNo.
VersiónEspecificación SVG 1.1
Sintaxis DOMObject.stroke = "#1c87c9";

Sintaxis

Sintaxis CSS de stroke

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

Ejemplo de la propiedad stroke:

Ejemplo de código CSS de stroke

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

Resultado

example

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

Otro ejemplo de código CSS de stroke

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

Valores

ValorDescripción
noneNo se aplica pintura.
colorEstablece un color sólido. Se pueden usar nombres de colores, códigos hexadecimales, rgb(), rgba(), hsl(), hsla().
urlReferencia URL a un elemento de servidor de pintura que define un servidor de pintura.
context-fillUsa el valor de fill de un elemento de contexto.
context-strokeUsa el valor de stroke de un elemento de contexto.
initialHace que la propiedad use su valor predeterminado.
inheritHereda la propiedad de su elemento padre.

Práctica

Práctica

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