We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Nuestros voluntarios aún no han traducido este artículo al Español. ¡Únete a nosotros y ayúdanos a traducirlo!
También puedes leer el artículo en English (US).

« SVG Attribute reference home

The stroke attribute defines the color of the outline on a given graphical element. The default value for the stroke attribute is none.

Usage context

Categories Presentation attribute

<paint>, context-fill, context-stroke

Animatable Yes
Normative document SVG 1.1 (2nd Edition)


SVG Line with stroke

Example1: Draw straight green line using stroke.

<svg height="50" width="300">
    <path stroke="green" d="M5 20 1215 0" />

Example2: Draw black circle with blue border using stroke.

​​<svg height="100" width="100">
    <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="2" fill="black" />

Using context-stroke

For information on using the non-standard and restricted context-stroke (and context-fill) value see the documentation for the -moz-context-properties property.


The following elements can use the stroke attribute

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support ? ? ? ? ? ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support ? ? ? ? ? ? ?

Etiquetas y colaboradores del documento

Última actualización por: connorshea,