drawsvg iconDRAWSVG user's guide
PreviousNextContentsPDFdrawsvg home

7.1. Stroke style properties

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

Table 7.1. Stroke style properties

Stroke style menuPropertyDescription
Image stroke-style-1.png

transparent, color, scaling, width, dash, opacity

transparent Controls the appearance of lines, visible or transparent. Sets the stroke property to none ( stroke="none" ).

https://www.w3.org/TR/SVG/painting.html#StrokeProperty
color Line solid color. Sets the stroke property with a color ( stroke="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#StrokeProperty
scaling Controls the appearance of the line thickness.

If this option is enabled, the drawing of line thicknesses is sensitive to changes in the view as defined in the SVG1.1.

Off, "vector-effect" SVG1.2 property is set to "non-scaling-stroke". Drawing the line thickness is constant regardless of the zoom level.

https://www.w3.org/TR/SVGTiny12/painting.html#NonScalingStroke
width

Sets the line thickness with his unit.

  • xy The line width is defined in the svg coordinate space

  • css units

    px, pt, pc, in, cm, mm

https://www.w3.org/TR/SVG/painting.html#StrokeWidthProperty
dash Specifies the pattern of dashes.

A list of lengths of alternating dashes and gaps. If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, 5,3,2 is equivalent to 5,3,2,5,3,2.

https://www.w3.org/TR/SVG/painting.html#StrokeDasharrayProperty
opacity Line opacity between 0 (transparent) and 1 (solid).

https://www.w3.org/TR/SVG/painting.html#StrokeOpacityProperty
Image stroke-style-2.png

gradient, cap, join

gradient

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

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

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

Image gradient-chooser.png

https://www.w3.org/TR/SVG/pservers.html#Gradients

cap Defines how the ends of an line is rendered.

https://www.w3.org/TR/SVG/painting.html#StrokeLinecapProperty
join Defines how the join between two lines in a shape is rendered.

https://www.w3.org/TR/SVG/painting.html#StrokeLinejoinProperty
Image stroke-style-3.png

pattern

pattern

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

The pattern can be customized with the pattern definition tool Image icon-patterntool.svg .

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

Image pattern-chooser.png

https://www.w3.org/TR/SVG/pservers.html#Patterns