Class SVGContext

constructor

• new SVGContext(element): SVGContext

• Parameters

  • element: HTMLElement

  Returns SVGContext

attributes

backgroundFillStyle

element

groups

height

lineWidth

parent

path

pen

shadow_attributes

state

state_stack

svg

width

fillStyle

• get fillStyle(): string | CanvasGradient | CanvasPattern

• Returns string | CanvasGradient | CanvasPattern

• set fillStyle(style): void

• Parameters

  • style: string | CanvasGradient | CanvasPattern

  Returns void

strokeStyle

• get strokeStyle(): string | CanvasGradient | CanvasPattern

• Returns string | CanvasGradient | CanvasPattern

• set strokeStyle(style): void

• Parameters

  • style: string | CanvasGradient | CanvasPattern

  Returns void

add

• add(elem): void

• Parameters

  • elem: SVGElement

  Returns void

applyAttributes

• applyAttributes(element, attributes): SVGElement

• Parameters

  • element: SVGElement

  • attributes: Attributes

  Returns SVGElement

arc

• arc(x, y, radius, startAngle, endAngle, counterclockwise): SVGContext

• Parameters

  • x: number

  • y: number

  • radius: number

  • startAngle: number

  • endAngle: number

  • counterclockwise: boolean

  Returns SVGContext

beginPath

• beginPath(): SVGContext

• Returns SVGContext

bezierCurveTo

• bezierCurveTo(x1, y1, x2, y2, x, y): SVGContext

• Parameters

  • x1: number

  • y1: number

  • x2: number

  • y2: number

  • x: number

  • y: number

  Returns SVGContext

clear

• clear(): void

• Returns void

clearRect

• clearRect(x, y, width, height): SVGContext

• Parameters

  • x: number

  • y: number

  • width: number

  • height: number

  Returns SVGContext

closeGroup

• closeGroup(): void

• Returns void

closePath

• closePath(): SVGContext

• Returns SVGContext

create

• create(svgElementType): SVGGElement

• Use one of the overload signatures to create an SVG element of a specific type. The last overload accepts an arbitrary string, and is identical to the implementation signature. Feel free to add new overloads for other SVG element types as required.

  Parameters

  • svgElementType: "g"

  Returns SVGGElement

• create(svgElementType): SVGPathElement

• Parameters

  • svgElementType: "path"

  Returns SVGPathElement

• create(svgElementType): SVGRectElement

• Parameters

  • svgElementType: "rect"

  Returns SVGRectElement

• create(svgElementType): SVGSVGElement

• Parameters

  • svgElementType: "svg"

  Returns SVGSVGElement

• create(svgElementType): SVGTextElement

• Parameters

  • svgElementType: "text"

  Returns SVGTextElement

• create(svgElementType): SVGElement

• Parameters

  • svgElementType: string

  Returns SVGElement

fill

• fill(attributes?): SVGContext

• Parameters

  • Optional attributes: Attributes

  Returns SVGContext

fillRect

• fillRect(x, y, width, height): SVGContext

• Parameters

  • x: number

  • y: number

  • width: number

  • height: number

  Returns SVGContext

fillText

• fillText(text, x, y): SVGContext

• Parameters

  • text: string

  • x: number

  • y: number

  Returns SVGContext

getFont

• getFont(): string

• Return a string of the form 'italic bold 15pt Arial'

  Returns string

lineTo

• lineTo(x, y): SVGContext

• Parameters

  • x: number

  • y: number

  Returns SVGContext

measureText

• measureText(text): TextMeasure

• Parameters

  • text: string

  Returns TextMeasure

moveTo

• moveTo(x, y): SVGContext

• Parameters

  • x: number

  • y: number

  Returns SVGContext

openGroup

• openGroup(cls?, id?, attrs?): SVGGElement

• Parameters

  • Optional cls: string

  • Optional id: string

  • Optional attrs: GroupAttributes

  Returns SVGGElement

quadraticCurveTo

• quadraticCurveTo(x1, y1, x, y): SVGContext

• Parameters

  • x1: number

  • y1: number

  • x: number

  • y: number

  Returns SVGContext

rect

• rect(x, y, width, height, attributes?): SVGContext

• Parameters

  • x: number

  • y: number

  • width: number

  • height: number

  • Optional attributes: Attributes

  Returns SVGContext

resize

• resize(width, height): SVGContext

• Parameters

  • width: number

  • height: number

  Returns SVGContext

restore

• restore(): SVGContext

• Returns SVGContext

save

• save(): SVGContext

• Returns SVGContext

scale

• scale(x, y): SVGContext

• Parameters

  • x: number

  • y: number

  Returns SVGContext

setBackgroundFillStyle

• setBackgroundFillStyle(style): SVGContext

• Used to set the fill color for clearRect(). This allows us to simulate cutting a "hole" into the SVG drawing.

  Parameters

  • style: string

  Returns SVGContext

setFillStyle

• setFillStyle(style): SVGContext

• Parameters

  • style: string

  Returns SVGContext

setFont

• setFont(f?, size?, weight?, style?): SVGContext

• Parameters

  • Optional f: string | FontInfo

    is 1) a FontInfo object or 2) a string formatted as CSS font shorthand (e.g., 'bold 10pt Arial') or 3) a string representing the font family (one of size, weight, or style must also be provided).

  • Optional size: string | number

    a string specifying the font size and unit (e.g., '16pt'), or a number (the unit is assumed to be 'pt').

  • Optional weight: string | number

    is a string (e.g., 'bold', 'normal') or a number (100, 200, ... 900). It is inserted into the font-weight attribute (e.g., font-weight="bold")

  • Optional style: string

    is a string (e.g., 'italic', 'normal') that is inserted into the font-style attribute (e.g., font-style="italic")

  Returns SVGContext

setLineCap

• setLineCap(capType): SVGContext
• Parameters

  • capType: CanvasLineCap

  Returns SVGContext

  this

setLineDash

• setLineDash(lineDash): SVGContext
• Parameters

  • lineDash: number[]

    an array of integers in the form of [dash, space, dash, space, etc...]

  Returns SVGContext

  this

  See: SVG stroke-dasharray attribute

setLineWidth

• setLineWidth(width): SVGContext
• Parameters

  • width: number

  Returns SVGContext

  this

setShadowBlur

• setShadowBlur(blur): SVGContext
• Parameters

  • blur: number

    A non-negative float specifying the level of shadow blur, where 0 represents no blur and larger numbers represent increasingly more blur.

  Returns SVGContext

  this

setShadowColor

• setShadowColor(color): SVGContext

• Parameters

  • color: string

  Returns SVGContext

setStrokeStyle

• setStrokeStyle(style): SVGContext

• Parameters

  • style: string

  Returns SVGContext

setViewBox

• setViewBox(viewBox_or_minX, minY?, width?, height?): void

• 1 arg: string in the "x y w h" format 4 args: x:number, y:number, w:number, h:number

  Parameters

  • viewBox_or_minX: string | number

  • Optional minY: number

  • Optional width: number

  • Optional height: number

  Returns void

stroke

• stroke(): SVGContext

• Returns SVGContext