Class SVGuitarChord

Hierarchy

SVGuitarChord

Constructors

constructor

new SVGuitarChord(container?: string | HTMLElement): SVGuitarChord
Parameters
- Optional container: string | HTMLElement
  
  The element into which the chord diagram is rendered. This can either be a CSS selector or a DOM element. If omitted, the diagram is rendered detached from the DOM and can be exported as a string with toSvg. This is useful for generating SVG files in a Node.js script without a browser.
Returns SVGuitarChord
- Defined in svguitar.ts:613

Properties

`Private` chordInternal

chordInternal: Chord = ...

`Private` `Optional` container

container?: string | HTMLElement

`Private` `Optional` fontsLoading

fontsLoading?: Promise<unknown>

`Private` `Optional` mirrorWidth

mirrorWidth?: number

Width of the area across which the diagram is mirrored in left-handed mode. Undefined if the diagram is not mirrored.

`Private` `Optional` rendererInternal

rendererInternal?: Renderer

`Private` settings

settings: ChordSettings = {}

`Static` plugins

plugins: SVGuitarPlugin[] = []

Accessors

`Private` isMirrored

get isMirrored(): boolean
whether the diagram is mirrored because it's drawn for left-handed players

Returns boolean
- Defined in svguitar.ts:1730

`Private` orientation

get orientation(): Orientation
Returns Orientation
- Defined in svguitar.ts:1833

`Private` renderer

get renderer(): Renderer
Returns Renderer
- Defined in svguitar.ts:622

Methods

`Private` arcBarHeight

arcBarHeight(): number
Returns number
- Defined in svguitar.ts:1049

`Private` arcDirection

arcDirection(): ArcDirection
The direction in which arc barre chords bulge: always towards the nut

Returns ArcDirection
- Defined in svguitar.ts:1787

chord

chord(chord: Chord): SVGuitarChord
Parameters
- chord: Chord
Returns SVGuitarChord
- Defined in svguitar.ts:657

clear

clear(): void
Returns void
- Defined in svguitar.ts:1679

configure

configure(settings: ChordSettings): SVGuitarChord
Parameters
- settings: ChordSettings
Returns SVGuitarChord
- Defined in svguitar.ts:641

`Private` coordinates

coordinates(x: number, y: number): {
x: number;
y: number;
}
rotates coordinates if orientation is horizontal

Returns
Parameters
- x: number
  
  x in vertical orientation
- y: number
  
  y in vertical orientation
Returns {
x: number;
y: number;
}
- x: number
- y: number
- Defined in svguitar.ts:1752

draw

draw(): {
height: number;
width: number;
}
Returns {
height: number;
width: number;
}
- height: number
- width: number
- Defined in svguitar.ts:663

`Private` drawBackground

drawBackground(): void
Returns void
- Defined in svguitar.ts:984

`Private` drawDiagram

drawDiagram(): {
    diagramWidth: number;
    height: number;
    width: number;
}
Returns {
    diagramWidth: number;
    height: number;
    width: number;
}
- diagramWidth: number
- height: number
- width: number
- Defined in svguitar.ts:700

`Private` drawEmptyStringIndicators

drawEmptyStringIndicators(y: number): number
Parameters
- y: number
Returns number
- Defined in svguitar.ts:1077

`Private` drawFinger

drawFinger(x: number, y: number, size: number, color: string, textSize: number, fontFamily: string, fingerOptions: FingerOptions, classNames: string[]): void
Parameters
- x: number
- y: number
- size: number
- color: string
- textSize: number
- fontFamily: string
- fingerOptions: FingerOptions
- classNames: string[]
Returns void
- Defined in svguitar.ts:1501

`Private` drawFretMarker

drawFretMarker(x: number, y: number, size: number, color: string, fretMarketOptions: FretMarker, classNames: string[]): void
Parameters
- x: number
- y: number
- size: number
- color: string
- fretMarketOptions: FretMarker
- classNames: string[]
Returns void
- Defined in svguitar.ts:1462

`Private` drawGrid

drawGrid(y: number): number
Parameters
- y: number
Returns number
- Defined in svguitar.ts:1202

`Private` drawPosition

drawPosition(y: number): undefined | GraphcisElement
Parameters
- y: number
Returns undefined | GraphcisElement
- Defined in svguitar.ts:857

`Private` drawShape

drawShape(shape: Shape, x: number, y: number, size: number, strokeWidth: number, strokeColor: string, fillColor: string, classNames: string[]): void
Parameters
- shape: Shape
- x: number
- y: number
- size: number
- strokeWidth: number
- strokeColor: string
- fillColor: string
- classNames: string[]
Returns void
- Defined in svguitar.ts:1561

`Private` drawTitle

drawTitle(size: number): number
Parameters
- size: number
Returns number
- Defined in svguitar.ts:1593

`Private` drawTopEdges

drawTopEdges(y: number, overflowX?: number, overflowY?: number): void
Hack to prevent the empty space of the svg from being cut off without having to define a fixed width
Parameters
- y: number
- overflowX: number = 0
- overflowY: number = 0
Returns void
- Defined in svguitar.ts:967

`Private` drawTopFret

drawTopFret(y: number): number
Parameters
- y: number
Returns number
- Defined in svguitar.ts:1000

`Private` drawTunings

drawTunings(y: number): number
Parameters
- y: number
Returns number
- Defined in svguitar.ts:776

`Private` drawWatermark

drawWatermark(y: number): number
Parameters
- y: number
Returns number
- Defined in svguitar.ts:819

`Private` effectiveFretLabelPosition

effectiveFretLabelPosition(): FretLabelPosition
The fret label position in the final diagram. A vertical left-handed diagram is mirrored, so the fret label is on the opposite side.

Returns FretLabelPosition
- Defined in svguitar.ts:1799

`Private` fingerSize

fingerSize(): number
Returns number
- Defined in svguitar.ts:1044

`Private` fretLabel

fretLabel(position: number): string | TextSegment[]
Parameters
- position: number
Returns string | TextSegment[]
- Defined in svguitar.ts:938

`Private` fretLinesYPos

fretLinesYPos(startY: number): number[]
Parameters
- startY: number
Returns number[]
- Defined in svguitar.ts:1064

`Private` fretSpacing

fretSpacing(): number
Returns number
- Defined in svguitar.ts:1057

`Private` height

height(height_: number, width: number): number
rotates height if orientation is horizontal

Returns
Parameters
- height_: number
  
  height in vertical orientation
- width: number
  
  width in vertical orientation
Returns number
- Defined in svguitar.ts:1818

`Private` numFrets

numFrets(): number
Returns number
- Defined in svguitar.ts:1030

`Private` numStrings

numStrings(): number
Returns number
- Defined in svguitar.ts:1026

`Private` rectCoordinates

rectCoordinates(x: number, y: number, width: number, height: number): {
    height: number;
    width: number;
    x: number;
    y: number;
}
rotates coordinates of a rectangle if orientation is horizontal

Returns
Parameters
- x: number
  
  x in vertical orientation
- y: number
  
  y in vertical orientation
- width: number
  
  width in vertical orientation
- height: number
  
  height in vertical orientation
Returns {
    height: number;
    width: number;
    x: number;
    y: number;
}
- height: number
- width: number
- x: number
- y: number
- Defined in svguitar.ts:1768

`Private` redrawWhenFontsLoad

redrawWhenFontsLoad(): void
A diagram drawn before its fonts have loaded is laid out with a fallback font, so it's drawn again once they have.

Returns void
- Defined in svguitar.ts:686

remove

remove(): void
Completely remove the diagram from the DOM

Returns void
- Defined in svguitar.ts:1686

`Private` stringSpacing

stringSpacing(): number
Returns number
- Defined in svguitar.ts:1034

`Private` stringXPos

stringXPos(): number[]
Returns number[]
- Defined in svguitar.ts:1017

`Private` strokeWidth

strokeWidth(): number
Returns number
- Defined in svguitar.ts:1053

`Private` toArrayIndex

toArrayIndex(stringIndex: number): number
Parameters
- stringIndex: number
Returns number
- Defined in svguitar.ts:1071

toSvg

toSvg(): string
Export the current chord diagram as an SVG string. Call this after draw.

The returned string is a standalone <svg> document (including the xmlns attribute), so it can be written directly to a .svg file. This works both in the browser and in a headless environment (see the constructor documentation).

Returns string
- Defined in svguitar.ts:1675

`Private` topFretSize

topFretSize(): number
Returns number
- Defined in svguitar.ts:990

`Private` width

width(width_: number, height: number): number
rotates width if orientation is horizontal

Returns
Parameters
- width_: number
  
  width in vertical orientation
- height: number
  
  height in vertical orientation
Returns number
- Defined in svguitar.ts:1829

`Private` x

x(x: number, y: number): number
rotates x value if orientation is horizontal

Returns
Parameters
- x: number
  
  x in vertical orientation
- y: number
  
  y in vertical orientation
Returns number
- Defined in svguitar.ts:1721

`Private` y

y(x: number, y: number): number
rotates y value if orientation is horizontal

Returns
Parameters
- x: number
  
  x in vertical orientation
- y: number
  
  y in vertical orientation
Returns number
- Defined in svguitar.ts:1741

`Static` `Private` getFingerOptions

getFingerOptions(textOrOptions: undefined | string | FingerOptions): FingerOptions
Helper method to get an options object from the 3rd array value for a finger, that can either be undefined, a string or and options object. This method will return an options object in any case, so it's easier to work with this third value.
Parameters
- textOrOptions: undefined | string | FingerOptions
Returns FingerOptions
- Defined in svguitar.ts:1698

`Static` plugin

plugin<S, T>(this: S, plugin: T): {
    plugins: any[];
    prototype: __type<any, any>;
    new (...args: any[]): __type<S, T>;
} & S & Constructor<ReturnTypeOf<T>>
Type Parameters
- S extends Constructor<any> & {
  plugins: any[];
  }
- T extends SVGuitarPlugin | SVGuitarPlugin[]
Parameters
- this: S
- plugin: T
Returns {
    plugins: any[];
    prototype: __type<any, any>;
    new (...args: any[]): __type<S, T>;
} & S & Constructor<ReturnTypeOf<T>>
- Defined in svguitar.ts:579

`Static` sanityCheckSettings

sanityCheckSettings(settings: Partial<ChordSettings>): void
Parameters
- settings: Partial<ChordSettings>
Returns void
- Defined in svguitar.ts:742

Class SVGuitarChord

Hierarchy

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

Optional container: string | HTMLElement

Returns SVGuitarChord

Properties

Private chordInternal

Private Optional container

Private Optional fontsLoading

Private Optional mirrorWidth

Private Optional rendererInternal

Private settings

Static plugins

Accessors

Private isMirrored

Returns boolean

Private orientation

Returns Orientation

Private renderer

Returns Renderer

Methods

Private arcBarHeight

Returns number

Private arcDirection

Returns ArcDirection

chord

Parameters

chord: Chord

Returns SVGuitarChord

clear

Returns void

configure

Parameters

settings: ChordSettings

Returns SVGuitarChord

Private coordinates

Returns

Parameters

x: number

y: number

Returns { x: number; y: number; }

x: number

y: number

draw

Returns { height: number; width: number; }

height: number

width: number

Private drawBackground

Returns void

Private drawDiagram

Returns { diagramWidth: number; height: number; width: number; }

diagramWidth: number

height: number

width: number

Private drawEmptyStringIndicators

Parameters

y: number

Returns number

Private drawFinger

Parameters

x: number

y: number

size: number

color: string

textSize: number

fontFamily: string

fingerOptions: FingerOptions

classNames: string[]

Returns void

Private drawFretMarker

Parameters

x: number

y: number

`Optional` container: string | HTMLElement

`Private` chordInternal

`Private` `Optional` container

`Private` `Optional` fontsLoading

`Private` `Optional` mirrorWidth

`Private` `Optional` rendererInternal

`Private` settings

`Static` plugins

`Private` isMirrored

`Private` orientation

`Private` renderer

`Private` arcBarHeight

`Private` arcDirection

`Private` coordinates

Returns {
x: number;
y: number;
}

Returns {
height: number;
width: number;
}

`Private` drawBackground

`Private` drawDiagram

Returns {
diagramWidth: number;
height: number;
width: number;
}

`Private` drawEmptyStringIndicators

`Private` drawFinger

`Private` drawFretMarker

`Private` drawGrid

`Private` drawPosition

`Private` drawShape

`Private` drawTitle

`Private` drawTopEdges

`Private` drawTopFret

`Private` drawTunings

`Private` drawWatermark

`Private` effectiveFretLabelPosition

`Private` fingerSize

`Private` fretLabel

`Private` fretLinesYPos

`Private` fretSpacing

`Private` height

`Private` numFrets

`Private` numStrings