CSS > le style pour le svg

CSS

circle {
   stroke: #000066;
   fill:   #0000cc;
}
circle.vert {
   stroke: #006600;
   fill:   #00cc00;
}
circle.rouge{
   stroke: #660000;
   fill:   #cc0000;
}

path

fill couleur de remplissage

fill-opacity opacité du remplissage

fill-rule fill rule of the shape

marker Sets marker used along the lines (edges) of this shape.

marker-start Sets start marker used along the lines (edges) of this shape.

marker-mid Sets mid marker used along the lines (edges) of this shape.

marker-end Sets end marker used along the lines (edges) of this shape.

stroke couleur du contour

stroke-dasharray Sets the stroke (line) dashing du contour

stroke-dashoffset Sets the stroke (line) dash offset du contour

stroke-linecap Sets the stroke (line) line cap du contour (round, butt et square)

stroke-linejoin arrondi des jointures (miter, round et bevel)

stroke-miterlimit Sets the stroke (line) miter limit du contour

stroke-opacity opacité du contour

stroke-width épaisseur du contour

text-rendering Sets the text-rendering du contour

 

 

 

Stroke

stroke-linecap

 

butt
square
round

 

butt cut off exactly where the line ends.

square results in a linecap that looks like butt (cut off), but which extends a bit beyond where the line ends.

round results in a round linecap.

 

This example defines three green lines with a stroke-width of 10 to better illustrate the effect of the stroke-linecap CSS property. Inside each green line is drawn a black line with a stroke-width of 1.

This line has the same x1, y1 and x2, y2 coordinates as the green line, but has no stroke-linecap set.

That way you can see the difference between the different stroke-linecap values.

stroke-linejoin

The stroke-linejoin CSS property defines how the join between two lines in a shape is rendered. The stroke-linejoin CSS property can take one of three values. These values are:

miter
round
bevel

Here are three SVG stroke-linejoin examples which illustrate these different values:

<path d="M20,100 l20,-50 l20,50"
      style="stroke: #000000;    fill:none;
             stroke-width:16px;
             stroke-linejoin: miter;" />
<text x="22" y="20">miter</text>

<path d="M120,100 l20,-50 l20,50"
      style="stroke: #000000;    fill:none;
             stroke-width:16px;
             stroke-linejoin: round;" />
<text x="122" y="20">round</text>

<path d="M220,100 l20,-50 l20,50"
      style="stroke: #000000;    fill:none;
             stroke-width:16px;
             stroke-linejoin: bevel;" />
<text x="222" y="20">bevel</text>

stroke-miterlimit

The stroke-miterlimit CSS propety is used together with the stroke-linejoin CSS property. If stroke-linejoin is set to miter, then the stroke-miterlimit can be used to limit how far between the point where the two lines meet, that the line join (corner) extends.

Here is an SVG stroke-miterlimit example:

<path d="M20,100 l20,-50 l20,50"
      style="stroke: #000000;    fill:none;
             stroke-width:16px;
             stroke-linejoin: miter;
             stroke-miterlimit: 1.0;
             " />
<text x="29" y="20">1.0</text>
<path d="M120,100 l20,-50 l20,50"
      style="stroke: #000000;    fill:none;
             stroke-width:16px;
             stroke-linejoin: miter;
             stroke-miterlimit: 2.0;
             " />
<text x="129" y="20">2.0</text>
<path d="M220,100 l20,-50 l20,50"
      style="stroke: #000000;    fill:none;
             stroke-width:16px;
             stroke-linejoin: miter;
             stroke-miterlimit: 4.0;
             " />
<text x="229" y="20">4.0</text>

Notice how three different stroke-miterlimit values are used for the three paths which otherwise look pretty much the same. Here is the resulting image:

1.0 2.0 4.0

The length of the line join is called miter length. The miter length is measured from the inner corner of the line join to the tip of the line join. In this image the miter length is drawn in red ontop of the joined lines, and repeated again to the right of the joined lines:

As you can imagine, the wider the stroke is, and the sharper the angle between the joining lines, the longer the miter becomes.

The stroke-miterlimit actually sets the limit for the ratio between the miter length and stroke width. Thus, a stroke-miterlimit of 1.0 means that the miter length can be maximally 1 x stroke width. The miter is cut off beyond that. 1.0 is the smallest possible value for stroke-miterlimit.

Here are some examples using 1.0 as stroke-miterlimit value, but with different angles of the joining lines:

Notice how the part of the miter which is cut off is larger when the angle is larger. That is because the sharper angle naturally produces a longer miter.

stroke-dasharray + stroke-dashoffset

The SVG stroke-dasharray CSS property is used to make the stroke of an SVG shape rendered with dashed lines. The reason it is called a "dash array" is that you provide an array of numbers as value. The values define the length of dashes and spaces. Therefore you should provide an even number of numbers.

Here is an SVG stroke-dasharray example:

<line x1="20" y1="20" x2="120" y2="20"
      style="stroke: #000000; fill:none;
      stroke-width: 6px;
      stroke-dasharray: 10 5"  />

This example defines a stroke that is dashed with the dashed parts being 10 pixels wide, and the space between the dashes being 5 pixels. Here is the resulting image:

Here are a few more examples with different dash and space width:

<line x1="20" y1="20" x2="120" y2="20"
      style="stroke: #000000; fill:none;
      stroke-width: 6px;
      stroke-dasharray: 10 5 5 5"  />

<line x1="20" y1="40" x2="120" y2="40"
      style="stroke: #000000; fill:none;
      stroke-width: 6px;
      stroke-dasharray: 10 5 5 10"  />

The first line starts with a dash width of 10, followed by a space of 5 pixels, then with a dash of 5 pixels, and then another space of 5 pixels. And then the pattern is repeated.

The second line starts with a dash width of 10, followed by a space of 5 pixels, then a dash of 5 pixels, and finally a space of 10 pixels.

Here is the resulting image:

The stroke-dashoffset is used to set how far into dash pattern to start the pattern. That way you can start the dashing from e.g. halfway into the pattern, and then repeat the pattern from there. Here is an SVG stroke-dashoffset example:

<line x1="20" y1="20" x2="170" y2="20"
      style="stroke: #000000; fill:none;
      stroke-width: 6px;
      stroke-dasharray: 10 5;
      stroke-dashoffset: 5;"  />

This example sets dash-offset to 5 pixels, meaning the rendering of the dashed line will start 5 pixels into the dash pattern (not all browsers fully support this yet). Here is the resulting image:

stroke-opacity

The SVG stroke-opacity CSS property is used to define the opacity of the outline of an SVG shape. The stroke-opacity takes a decimal number between 0 and 1. The closer to 0 the value is, the more transparent the stroke is. The closer to 1 the value is, the more opaque the stroke is. The default stroke-opacity is 1, meaning the stroke is fully opaque.

Here is an SVG stroke-opacity example which shows three lines with different stroke-opacity ontop of a text:

<text x="22" y="40">Text Behind Shape</text>
<path d="M20,40 l50,0" style="stroke: #00ff00;fill:none;stroke-width:16px;stroke-opacity: 0.3;" />
<path d="M80,40 l50,0" style="stroke: #00ff00;fill:none;stroke-width:16px;stroke-opacity: 0.7;" />
<path d="M140,40 l50,0" style="stroke: #00ff00;fill:none;stroke-width:16px;stroke-opacity: 1;" />

Here is the resulting image. Notice how the text is less and less visible through the different lines.

texte

alignment-baseline Sets how the text is aligned to its x and y coordinates

baseline-shift Sets the baseline shift used to render text

dominant-baseline Sets the dominant baseline

glyph-orientation-horizontal horizontal glyph orientation

glyph-orientation-vertical vertical glyph orientation

kerning espacement entre les lettres

dégradé

stop-color Sets the stop color used in a stop element used in a gradient

stop-opacity Sets the stop opacity used in a stop element used in a gradient