Style

Style

Definition

type Style =
    {
        Fill : Color option;
        Stroke : Color option;
        StrokeWidth : Length option;
        Opacity: float option;
        FillOpacity: float option;
        Name: string option;
    }

Description

Style is used to decorate SVG elements with colors and pen sizes. It uses Color and Length to describe its attributes. Naming styles enables them to be reused and reduces the overall size of the resulting SVG.

Constants

Constant	Type	Description
Style.empty	Style	a style with no attributes that can be used as a base for the Style.with functions

Functions

Function	Signature	Description
Style.withName	Style -> Style	adds a name to a style
Style.createWithPen	Pen -> Style	creates a style with a specified stroke Pen
Style.withStrokePen	Pen -> Style -> Style	adds the stroke with a specified Pen
Style.withFillPen	Pen -> Style -> Style	adds the fill with a specified Pen
Style.withFill	Color -> Style -> Style	adds a fill attribute to a style
Style.withStroke	Color -> Style -> Style	adds a stroke color attribute to a style
Style.withStrokeWidth	Length -> Style -> Style	adds a stroke width attribute to a style
Style.withOpacity	float -> Style -> Style	adds a opacity attribute to a style
Style.create	Color -> Color -> Length -> float -> float -> Style	creates a new style with a fill color, stroke color, stroke width, stroke opacity, and fill opacity
Style.createNamed	Color -> Color -> Length -> float -> name -> Style	creates a new style with a fill color, stroke color, stroke width, stroke opacity, fill opacity, and a name
Style.createWithFill	Color -> Style	creates a style with the specified fill color
Style.createWithStroke	Color -> Style	creates a style with the specified stroke color
Style.createWithStrokeWidth	Length -> Style	creates a style with the specified stroke width
Style.createWithOpacity	Color -> Style	creates a style with the specified stroke opacity
Style.createWithFillOpacity	Color -> Style	creates a style with the specified fill opacity
Style.isNamed	Style -> bool	returns true if the style is named
Style.toString	Style -> string	converts a style to a string appropriate for attributes
Style.toCssString	Style -> string	converts a style to a string appropriate for css
Styles.toString	Seq<Style> -> Tag	converts a sequence of styles into a string via CDATA
Styles.named	Seq<Style> -> seq<Style>	removes all unnamed styles in a sequence

Usage

Example

let style1 =
  Style.createWithName "Default"
    |> Style.withFill (Color.ofName Colors.Blue)
    |> Style.withStroke (Color.ofName Colors.Aqua)
    |> Style.withOpacity 0.5

let color = Color.ofPercents (0.5, 0.5, 0.5)
let style2 = Style.createNamed color color Length.one 1.0 1.0 "Boring"

let styles = seq { yield style1; yield style2; }

printfn "style1 = %s" <| Style.toString style1
printfn "style2 = %s" <| Style.toCssString style2
printfn "styles = %s" <| Styles.toString styles

Output

style1 = "stroke:aqua;fill:blue;opacity:0.5"
style2 = ".Boring {stroke:(0.5%,0.5%,0.5%);stroke-width:1;fill:(0.5%,0.5%,0.5%);opacity:1}"
styles = "<style type="text/css"><![CDATA[.Default {stroke:aqua;fill:blue;opacity:0.5} .Boring {stroke:(0.5%,0.5%,0.5%);stroke-width:1;fill:(0.5%,0.5%,0.5%);opacity:1}]]></style>"