Options
All
  • Public
  • Public/Protected
  • All
Menu

Class SVGContext

SVG rendering context with an API similar to CanvasRenderingContext2D.

Hierarchy

Index

Constructors

constructor

Properties

attributes

attributes: Attributes

backgroundFillStyle

backgroundFillStyle: string = 'white'

element

element: HTMLElement

groups

groups: SVGGElement[]

height

height: number = 0

lineWidth

lineWidth: number

parent

parent: SVGGElement

path

path: string

pen

pen: { x: number; y: number }

Type declaration

  • x: number
  • y: number

shadow_attributes

shadow_attributes: Attributes

state

state: Attributes

state_stack

state_stack: State[]

svg

svg: SVGSVGElement

width

width: number = 0

Accessors

fillStyle

  • get fillStyle(): string | CanvasGradient | CanvasPattern
  • set fillStyle(style: string | CanvasGradient | CanvasPattern): void
  • Returns string | CanvasGradient | CanvasPattern

  • Parameters

    • style: string | CanvasGradient | CanvasPattern

    Returns void

font

  • get font(): string
  • set font(f: string): void
  • Returns string

  • Parameters

    • f: string

    Returns void

strokeStyle

  • get strokeStyle(): string | CanvasGradient | CanvasPattern
  • set strokeStyle(style: string | CanvasGradient | CanvasPattern): void
  • Returns string | CanvasGradient | CanvasPattern

  • Parameters

    • style: string | CanvasGradient | CanvasPattern

    Returns void

Static CATEGORY

  • get CATEGORY(): string
  • Returns string

Methods

add

  • add(elem: SVGElement): void

applyAttributes

  • applyAttributes(element: SVGElement, attributes: Attributes): SVGElement
  • Parameters

    Returns SVGElement

arc

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

    • x: number
    • y: number
    • radius: number
    • startAngle: number
    • endAngle: number
    • counterclockwise: boolean

    Returns SVGContext

beginPath

bezierCurveTo

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

clear

  • clear(): void

clearRect

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

closeGroup

  • closeGroup(): void

closePath

create

  • create(svgElementType: "g"): SVGGElement
  • create(svgElementType: "path"): SVGPathElement
  • create(svgElementType: "rect"): SVGRectElement
  • create(svgElementType: "svg"): SVGSVGElement
  • create(svgElementType: "text"): SVGTextElement
  • create(svgElementType: string): SVGElement
  • 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

  • Parameters

    • svgElementType: "path"

    Returns SVGPathElement

  • Parameters

    • svgElementType: "rect"

    Returns SVGRectElement

  • Parameters

    • svgElementType: "svg"

    Returns SVGSVGElement

  • Parameters

    • svgElementType: "text"

    Returns SVGTextElement

  • Parameters

    • svgElementType: string

    Returns SVGElement

fill

fillRect

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

fillText

  • fillText(text: string, x: number, y: number): SVGContext

getFont

  • getFont(): string

lineTo

measureText

moveTo

openGroup

quadraticCurveTo

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

rect

resize

restore

save

scale

setBackgroundFillStyle

setFillStyle

setFont

  • setFont(f?: string | FontInfo, size?: string | number, weight?: string | number, style?: string): 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

setLineDash

setLineWidth

setRawFont

  • This is kept for backwards compatibility with 3.0.9.

    deprecated

    use setFont(...) instead since it now supports CSS font shorthand.

    Parameters

    • f: string

    Returns SVGContext

setShadowBlur

  • 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

setStrokeStyle

setViewBox

  • setViewBox(viewBox_or_minX: string | number, minY?: number, width?: number, height?: number): 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