A utility class that holds all properties of a Stroke.
ImplementsInheritance Hierarchy

Remarks

The stroke that is defined by instances of this type can be applied to an SVG element using either the static helper setStroke or the instance method applyTo.

This is a convertible type that can be used with the following notation(s) in parameter lists, parameter objects or setters.

The strings applying to this scheme are converted to Strokes:

'[thickness] [type] color'

thickness = thickness in px|thin|medium|thick
type = solid|dashed|dotted
color = CSS color strings

Valid color strings are the same as for Color. Square brackets mark optional declarations.

Examples:

'3px dashed blue'
'thick blue'
'dotted blue'

See Also

Developer's Guide

API

setStroke

Members

No filters for this type

Constructors

Initializes a new instance of the Stroke class using the given fill and thickness.

Parameters

fill?: Fill
The fill.
thickness?: number
The thickness.
Initializes a new instance of the Stroke class using the given rgba values and thickness.
The rgba values must be between 0 and 255.

Parameters

r: number
The red value.
g: number
The green value.
b: number
The blue value.
a?: number
The alpha value, 255 by default.
thickness?: number
The thickness, 1 by default.

Properties

Gets or sets the dash style for the Stroke.

The visual appearance of the 'dashes' and 'gaps' specified by this property depends on the value of the property lineCap, too.

The predefined dash styles are designed for dash caps that extend into the 'gaps' like SQUARE and ROUND. With FLAT, the dashes might not look like expected, for example DOT will not be visible at all. Since FLAT is the default value, you should explicitly set another value in this case.

conversionfinal

Property Value

The dash style. The values of a dash style are in terms of multiples of the thickness of this pen. This is different from the corresponding properties of a SVG stroke.
Gets or sets the fill for the Stroke.
conversionfinal

Property Value

The fill.
Gets or sets the dash cap.
conversionfinal

Property Value

The dash cap.
Gets or sets the line-join property.
conversionfinal

Property Value

The line join property.
Gets or sets the miter limit.
final

Property Value

The miter limit.
Gets or sets the thickness of the stroke.
final

Property Value

The thickness.

Methods

Assigns the stroke defined by this instance to the given SVG element.
This method is very similar in functionality to its static method counter part setStroke. However since this method is an instance method, it cannot be called on non-existing/null strokes. If you are unsure whether the reference actually points to an instance, use the static helper method instead.
final

Parameters

element: SVGElement
The element whose fill should be set.
context: ICanvasContext
The context.

See Also

API
setStroke
Clones this instance by returning a memberwise clone, or by returning this if this instance is frozen.
final

Return Value

Object
An instance of the same type as this instance.
Clones the current value of this instance to a new unfrozen Stroke.
final

Return Value

Stroke
A new unfrozen Stroke instance with the value of the current instance.
Freezes and returns this instance.
Freezing an object makes it immutable, which can result in performance enhancements.
final

Return Value

Stroke
This instance, made immutable.
Determines if this instance is frozen.
final

Return Value

boolean
true if this instance is frozen; otherwise, false.

Constants

Gets a frozen Stroke that uses ALICE_BLUE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses ANTIQUE_WHITE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses AQUA as its fill and has a thickness of 1.
Gets a frozen Stroke that uses AQUAMARINE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses AZURE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses BEIGE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses BISQUE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses BLACK as its fill and has a thickness of 1.
Gets a frozen Stroke that uses BLANCHED_ALMOND as its fill and has a thickness of 1.
Gets a frozen Stroke that uses BLUE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses BLUE_VIOLET as its fill and has a thickness of 1.
Gets a frozen Stroke that uses BROWN as its fill and has a thickness of 1.
Gets a frozen Stroke that uses BURLY_WOOD as its fill and has a thickness of 1.
Gets a frozen Stroke that uses CADET_BLUE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses CHARTREUSE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses CHOCOLATE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses CORAL as its fill and has a thickness of 1.
Gets a frozen Stroke that uses CORNFLOWER_BLUE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses CORNSILK as its fill and has a thickness of 1.
Gets a frozen Stroke that uses CRIMSON as its fill and has a thickness of 1.
Gets a frozen Stroke that uses CURRENT_COLOR as its fill and has a thickness of 1.
Gets a frozen Stroke that uses CYAN as its fill and has a thickness of 1.
Gets a frozen Stroke that uses DARK_BLUE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses DARK_CYAN as its fill and has a thickness of 1.
Gets a frozen Stroke that uses DARK_GOLDENROD as its fill and has a thickness of 1.
Gets a frozen Stroke that uses DARK_GRAY as its fill and has a thickness of 1.
Gets a frozen Stroke that uses DARK_GREEN as its fill and has a thickness of 1.
Gets a frozen Stroke that uses DARK_KHAKI as its fill and has a thickness of 1.
Gets a frozen Stroke that uses DARK_MAGENTA as its fill and has a thickness of 1.
Gets a frozen Stroke that uses DARK_OLIVE_GREEN as its fill and has a thickness of 1.
Gets a frozen Stroke that uses DARK_ORANGE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses DARK_ORCHID as its fill and has a thickness of 1.
Gets a frozen Stroke that uses DARK_RED as its fill and has a thickness of 1.
Gets a frozen Stroke that uses DARK_SALMON as its fill and has a thickness of 1.
Gets a frozen Stroke that uses DARK_SEA_GREEN as its fill and has a thickness of 1.
Gets a frozen Stroke that uses DARK_SLATE_BLUE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses DARK_SLATE_GRAY as its fill and has a thickness of 1.
Gets a frozen Stroke that uses DARK_TURQUOISE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses DARK_VIOLET as its fill and has a thickness of 1.
Gets a frozen Stroke that uses DEEP_PINK as its fill and has a thickness of 1.
Gets a frozen Stroke that uses DEEP_SKY_BLUE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses DIM_GRAY as its fill and has a thickness of 1.
Gets a frozen Stroke that uses DODGER_BLUE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses FIREBRICK as its fill and has a thickness of 1.
Gets a frozen Stroke that uses FLORAL_WHITE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses FOREST_GREEN as its fill and has a thickness of 1.
Gets a frozen Stroke that uses FUCHSIA as its fill and has a thickness of 1.
Gets a frozen Stroke that uses GAINSBORO as its fill and has a thickness of 1.
Gets a frozen Stroke that uses GHOST_WHITE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses GOLD as its fill and has a thickness of 1.
Gets a frozen Stroke that uses GOLDENROD as its fill and has a thickness of 1.
Gets a frozen Stroke that uses GRAY as its fill and has a thickness of 1.
Gets a frozen Stroke that uses GREEN as its fill and has a thickness of 1.
Gets a frozen Stroke that uses GREEN_YELLOW as its fill and has a thickness of 1.
Gets a frozen Stroke that uses HONEYDEW as its fill and has a thickness of 1.
Gets a frozen Stroke that uses HOT_PINK as its fill and has a thickness of 1.
Gets a frozen Stroke that uses INDIAN_RED as its fill and has a thickness of 1.
Gets a frozen Stroke that uses INDIGO as its fill and has a thickness of 1.
Gets a frozen Stroke that uses IVORY as its fill and has a thickness of 1.
Gets a frozen Stroke that uses KHAKI as its fill and has a thickness of 1.
Gets a frozen Stroke that uses LAVENDER as its fill and has a thickness of 1.
Gets a frozen Stroke that uses LAVENDER_BLUSH as its fill and has a thickness of 1.
Gets a frozen Stroke that uses LAWN_GREEN as its fill and has a thickness of 1.
Gets a frozen Stroke that uses LEMON_CHIFFON as its fill and has a thickness of 1.
Gets a frozen Stroke that uses LIGHT_BLUE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses LIGHT_CORAL as its fill and has a thickness of 1.
Gets a frozen Stroke that uses LIGHT_CYAN as its fill and has a thickness of 1.
Gets a frozen Stroke that uses LIGHT_GOLDENROD_YELLOW as its fill and has a thickness of 1.
Gets a frozen Stroke that uses LIGHT_GRAY as its fill and has a thickness of 1.
Gets a frozen Stroke that uses LIGHT_GREEN as its fill and has a thickness of 1.
Gets a frozen Stroke that uses LIGHT_PINK as its fill and has a thickness of 1.
Gets a frozen Stroke that uses LIGHT_SALMON as its fill and has a thickness of 1.
Gets a frozen Stroke that uses LIGHT_SEA_GREEN as its fill and has a thickness of 1.
Gets a frozen Stroke that uses LIGHT_SKY_BLUE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses LIGHT_SLATE_GRAY as its fill and has a thickness of 1.
Gets a frozen Stroke that uses LIGHT_STEEL_BLUE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses LIGHT_YELLOW as its fill and has a thickness of 1.
Gets a frozen Stroke that uses LIME as its fill and has a thickness of 1.
Gets a frozen Stroke that uses LIME_GREEN as its fill and has a thickness of 1.
Gets a frozen Stroke that uses LINEN as its fill and has a thickness of 1.
Gets a frozen Stroke that uses MAGENTA as its fill and has a thickness of 1.
Gets a frozen Stroke that uses MAROON as its fill and has a thickness of 1.
Gets a frozen Stroke that uses MEDIUM_AQUAMARINE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses MEDIUM_BLUE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses MEDIUM_ORCHID as its fill and has a thickness of 1.
Gets a frozen Stroke that uses MEDIUM_PURPLE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses MEDIUM_SEA_GREEN as its fill and has a thickness of 1.
Gets a frozen Stroke that uses MEDIUM_SLATE_BLUE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses MEDIUM_SPRING_GREEN as its fill and has a thickness of 1.
Gets a frozen Stroke that uses MEDIUM_TURQUOISE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses MEDIUM_VIOLET_RED as its fill and has a thickness of 1.
Gets a frozen Stroke that uses MIDNIGHT_BLUE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses MINT_CREAM as its fill and has a thickness of 1.
Gets a frozen Stroke that uses MISTY_ROSE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses MOCCASIN as its fill and has a thickness of 1.
Gets a frozen Stroke that uses NAVAJO_WHITE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses NAVY as its fill and has a thickness of 1.
Gets a frozen Stroke that uses OLD_LACE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses OLIVE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses OLIVE_DRAB as its fill and has a thickness of 1.
Gets a frozen Stroke that uses ORANGE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses ORANGE_RED as its fill and has a thickness of 1.
Gets a frozen Stroke that uses ORCHID as its fill and has a thickness of 1.
Gets a frozen Stroke that uses PALE_GOLDENROD as its fill and has a thickness of 1.
Gets a frozen Stroke that uses PALE_GREEN as its fill and has a thickness of 1.
Gets a frozen Stroke that uses PALE_TURQUOISE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses PALE_VIOLET_RED as its fill and has a thickness of 1.
Gets a frozen Stroke that uses PAPAYA_WHIP as its fill and has a thickness of 1.
Gets a frozen Stroke that uses PEACH_PUFF as its fill and has a thickness of 1.
Gets a frozen Stroke that uses PERU as its fill and has a thickness of 1.
Gets a frozen Stroke that uses PINK as its fill and has a thickness of 1.
Gets a frozen Stroke that uses PLUM as its fill and has a thickness of 1.
Gets a frozen Stroke that uses POWDER_BLUE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses PURPLE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses RED as its fill and has a thickness of 1.
Gets a frozen Stroke that uses ROSY_BROWN as its fill and has a thickness of 1.
Gets a frozen Stroke that uses ROYAL_BLUE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses SADDLE_BROWN as its fill and has a thickness of 1.
Gets a frozen Stroke that uses SALMON as its fill and has a thickness of 1.
Gets a frozen Stroke that uses SANDY_BROWN as its fill and has a thickness of 1.
Gets a frozen Stroke that uses SEA_GREEN as its fill and has a thickness of 1.
Gets a frozen Stroke that uses SEA_SHELL as its fill and has a thickness of 1.
Gets a frozen Stroke that uses SIENNA as its fill and has a thickness of 1.
Gets a frozen Stroke that uses SILVER as its fill and has a thickness of 1.
Gets a frozen Stroke that uses SKY_BLUE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses SLATE_BLUE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses SLATE_GRAY as its fill and has a thickness of 1.
Gets a frozen Stroke that uses SNOW as its fill and has a thickness of 1.
Gets a frozen Stroke that uses SPRING_GREEN as its fill and has a thickness of 1.
Gets a frozen Stroke that uses STEEL_BLUE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses TAN as its fill and has a thickness of 1.
Gets a frozen Stroke that uses TEAL as its fill and has a thickness of 1.
Gets a frozen Stroke that uses THISTLE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses TOMATO as its fill and has a thickness of 1.
Gets a frozen Stroke that uses TRANSPARENT as its fill and has a thickness of 1.
Gets a frozen Stroke that uses TURQUOISE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses VIOLET as its fill and has a thickness of 1.
Gets a frozen Stroke that uses WHEAT as its fill and has a thickness of 1.
Gets a frozen Stroke that uses WHITE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses WHITE_SMOKE as its fill and has a thickness of 1.
Gets a frozen Stroke that uses YELLOW as its fill and has a thickness of 1.
Gets a frozen Stroke that uses YELLOW_GREEN as its fill and has a thickness of 1.

Static Methods

Creates a Stroke instance from the given stroke-like object by performing automatic type conversion.
static

Parameters

strokeLike: Stroke
The object to convert to a Stroke.

Return Value

Stroke
The given strokeLike if it is already a Stroke, or a new instance initialized to the values found in strokeLike.
Sets the Stroke on a given SVG element as the stroke.
This method is very similar in functionality to its instance method counter part applyTo. However being static, it also allows for the case where the stroke is null.
static

Parameters

stroke: Stroke
The stroke that should be applied. If null, the element's stroke is removed.
element: SVGElement
The element whose stroke should be set.
context: ICanvasContext
The context to use for managing possible defs entries.

See Also

API
applyTo