Options
All
  • Public
  • Public/Protected
  • All
Menu

Class SVGContext

SVG rendering context with an API similar to CanvasRenderingContext2D.

Hierarchy

Index

Constructors

Properties

attributes: Attributes
backgroundFillStyle: string = 'white'
element: HTMLElement
groups: SVGGElement[]
height: number = 0
lineWidth: number
parent: SVGGElement
path: string
pen: { x: number; y: number }

Type declaration

  • x: number
  • y: number
shadow_attributes: Attributes
state: Attributes
state_stack: State[]
svg: SVGSVGElement
width: number = 0

Accessors

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

  • Parameters

    • style: string | CanvasGradient | CanvasPattern

    Returns void

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

  • Parameters

    • f: string

    Returns void

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

  • Parameters

    • style: string | CanvasGradient | CanvasPattern

    Returns void

  • get CATEGORY(): string
  • Returns string

Methods

  • add(elem: SVGElement): void
  • applyAttributes(element: SVGElement, attributes: Attributes): SVGElement
  • Parameters

    Returns SVGElement

  • 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

  • bezierCurveTo(x1: number, y1: number, x2: number, y2: number, x: number, y: number): SVGContext
  • clear(): void
  • clearRect(x: number, y: number, width: number, height: number): SVGContext
  • closeGroup(): void
  • 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

  • fillRect(x: number, y: number, width: number, height: number): SVGContext
  • fillText(text: string, x: number, y: number): SVGContext
  • getFont(): string
  • quadraticCurveTo(x1: number, y1: number, x: number, y: number): SVGContext
  • 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

  • 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

  • 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

  • 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