drawsvg iconDRAWSVG user's guide
PreviousNextContentsPDFdrawsvg home

7.2. Fill style properties

These properties are applicable to closed geometric shapes as well as text.

Table 7.2. Fill style properties

MenuPropertyDescription
Image fill-style-1.png

transparent, color, opacity, gradient.

transparent Controls the appearance of filling the form. Sets the fill property to none ( fill="none" ).

https://www.w3.org/TR/SVG/painting.html#FillProperty
color Fill solid color. Sets the fill property with a color ( fill="color" )..

The color can be selected from the basic palette, entered in the text field, or set with the color chooser svg panel available from its icon Image palette.png .

https://www.w3.org/TR/SVG/painting.html#FillProperty
Opacity Fill form opacity between 0 (transparent) and 1 (solid).

https://www.w3.org/TR/SVG/painting.html#FillOpacityProperty

gradient

Gradient applied to the fill form in place of the solid color. Sets the fill property with a gradient id ( fill="url(#MyGradient)" ).

The gradient can be customized and selected with the gradient definition tool Image gradient-cutomize.png .

The gradient can be selected with the chooser tool Image svg143.svg .

Image gradient-chooser.png

There are two types of gradients: linear and radial .

Image fill-style-2.png

rule

pattern

Pattern applied to the fill form in place of the solid color. Sets the fill property with a pattern id ( fill="url(#MyPattern)" ).

The pattern can be customized and selected with the pattern definition tool Image gradient-cutomize.png .

The pattern can be selected from the drawn list or with the chooser tool Image svg143.svg .

Image pattern-chooser.png
rule Defines the filling algorithm.

The method evenodd is useful for surfaces with holes.

https://www.w3.org/TR/SVG/painting.html#FillRuleProperty