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" />

Example 3: SVG rectangles with context stroke

If you specify SVG as the image embedded by an element (commonly, the <img> element), you can get the embedded SVG to adopt property values set on the <img>. To do this, you first need to specify the properties whose values you wish to expose to the embedded SVG, using the -moz-context-properties property. For example:

img {
  width: 100px;
  height: 100px;
  -moz-context-properties: fill, stroke;

.img1 {
    fill: lime;
    stroke: purple;

Now we've done this, we can use the fill and stroke values in our SVG, for example:

<img class="img1" src="data:image/svg+xml;utf8,<svg xmlns=''>
                       <rect width='100%' height='100%' stroke-width='30px'
                       fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/></svg>">

Here we've set the image src to a data URI containing a simple SVG image; the <rect> inside has been made to take its stroke value from the stroke set on the <img> element by giving it the context-stroke keyword as its value. Note that if a color is set directly on the SVG, but then the context color is also specified (as is the case with the fill attribute above), the context color overrides the direct color.

Note: You can find a working example on Github.

Note: This feature is available since Firefox 55, but only enabled fully on Nightly; on other versions of Firefox you'll have to set the svg.context-properties.content.enabled pref to true, if the images aren't referenced via a chrome:// or resource:// URL.


The following elements can use the stroke attribute

Etiquetas y colaboradores del documento

 Colaboradores en esta página: chrisdavidmills, tonedef, ntinsley78, elindie, netsurfer912, Jeremie
 Última actualización por: chrisdavidmills,