Ancho de trazo - Trucos CSS

Anonim

La stroke-widthpropiedad en CSS es para establecer el ancho de un borde en formas SVG.

.module ( stroke-width: 2; )

Recuerda:

  • Esto va a anular un atributo de presentación
  • Esto no anulará un estilo en línea, p. Ej.

Valores

La stroke-widthpropiedad puede aceptar cualquier número, incluidos números enteros, decimales y porcentajes:

  • stroke-width: 2px
  • stroke-width: 2em
  • stroke-width: 2
  • stroke-width: 2.5
  • stroke-width: 15%

Tenga en cuenta que no se requiere un identificador de unidad (es decir, pxy em). Un número sin unidades es un valor basado en el sistema de coordenadas del SVG viewBox. Entonces, por ejemplo, 5renderiza lo mismo que 5%en a viewBoxque se establece en 0 0 100 100(5/100 = .05 o 5%) pero 10%en uno que es 0 0 50 50(5/50 = .1 o 10%).

Consulte la propiedad Pen stroke-width de CSS-Tricks (@ css-tricks) en CodePen.

Relacionado

  • stroke
  • stroke-dasharray
  • stroke-dashoffset
  • stroke-linecap

Más información

  • Especificaciones de SVG 1.1
  • MDN en rellenos y trazos

Soporte del navegador

Cromo Safari Firefox Ópera ES DECIR Androide iOS
sí sí sí sí 9+ 4.4+ sí