Class SvgBuilder

A specialized SvgGroup that provides methods for adding SVG definitions like clip paths and patterns. It extends SvgGroup to inherit common SVG element functionalities and acts as a container for definitions.

Hierarchy (View Summary)

SvgGroup
- SvgBuilder

Constructors

constructor

new SvgBuilder(): SvgBuilder
Creates an instance of SvgBuilder.

Returns SvgBuilder
Overrides SvgGroup.constructor
- Defined in src/core/core_svg.ts:922

Properties

`Protected`_dom

_dom: SVGElement

Methods

add_rotation

add_rotation(deg: number, cx: number, cy: number): this
Parameters
- deg: number
- cx: number
- cy: number
Returns this
Inherited from SvgGroup.add_rotation
- Defined in src/core/core_svg.ts:353

add_scale

add_scale(x: number): this
Parameters
- x: number
Returns this
Inherited from SvgGroup.add_scale
- Defined in src/core/core_svg.ts:381

add_transformation

add_transformation(tr: string): this
add a transformation to the current transformation
Parameters
- tr: string
Returns this
Inherited from SvgGroup.add_transformation
- Defined in src/core/core_svg.ts:329

add_translation

add_translation(dx: number, dy: number): this
Parameters
- dx: number
- dy: number
Returns this
Inherited from SvgGroup.add_translation
- Defined in src/core/core_svg.ts:367

addClass

addClass(cls: string): this
add a class
Parameters
- cls: string
  class name to add
Returns this
Inherited from SvgGroup.addClass
- Defined in src/core/core_svg.ts:273

addClip

addClip(
    x: number,
    y: number,
    w: number,
    h: number,
): { clip: SvgGroup; id: string }
Adds an SVG clip path definition to the builder.
Parameters
- x: number
  The x-coordinate of the top-left corner of the clipping rectangle.
- y: number
  The y-coordinate of the top-left corner of the clipping rectangle.
- w: number
  The width of the clipping rectangle.
- h: number
  The height of the clipping rectangle.
Returns { clip: SvgGroup; id: string }
An object containing the generated id for the clip path and the SvgGroup instance representing the clip path.
- clip: SvgGroup
- id: string
  
  Adds an SVG clip path definition to the builder.
  
  Param: x
  The x-coordinate of the top-left corner of the clipping rectangle.
  
  Param: y
  The y-coordinate of the top-left corner of the clipping rectangle.
  
  Param: w
  The width of the clipping rectangle.
  
  Param: h
  The height of the clipping rectangle.
  
  Returns
  An object containing the generated id for the clip path and the SvgGroup instance representing the clip path.
- Defined in src/core/core_svg.ts:935

addDOMEvent

addDOMEvent<K extends keyof GlobalDOMEvents>(
    name: K,
    listener: GlobalDOMEvents[K],
    prepend?: boolean,
): SvgBuilder
handle SVG DOM event
Type Parameters
- K extends keyof GlobalDOMEvents
Parameters
- name: K
- listener: GlobalDOMEvents[K]
- prepend: boolean = false
Returns SvgBuilder
Inherited from SvgGroup.addDOMEvent
- Defined in src/core/core_svg.ts:390

addPattern

addPattern(
    x: number,
    y: number,
    w: number,
    h: number,
): { id: string; pat: SvgGroup }
Adds an SVG pattern definition to the builder.
Parameters
- x: number
  The x-coordinate of the pattern tile's top-left corner.
- y: number
  The y-coordinate of the pattern tile's top-left corner.
- w: number
  The width of the pattern tile.
- h: number
  The height of the pattern tile.
Returns { id: string; pat: SvgGroup }
An object containing the generated id for the pattern and the SvgGroup instance representing the pattern.
- id: string
  
  Adds an SVG pattern definition to the builder.
  
  Param: x
  The x-coordinate of the pattern tile's top-left corner.
  
  Param: y
  The y-coordinate of the pattern tile's top-left corner.
  
  Param: w
  The width of the pattern tile.
  
  Param: h
  The height of the pattern tile.
  
  Returns
  An object containing the generated id for the pattern and the SvgGroup instance representing the pattern.
- pat: SvgGroup
- Defined in src/core/core_svg.ts:963

antiAlias

antiAlias(set: boolean): SvgBuilder
Set the shape rendering attribute to control anti-aliasing for shapes.

When enabled, the attribute is set to "auto" to allow smoothing/anti-aliasing. When disabled, the attribute is set to "crispEdges" to favor pixel-aligned, non-anti-aliased rendering.
Parameters
- set: boolean
  True to enable anti-aliasing ("auto"), false to disable ("crispEdges").
Returns SvgBuilder
the current instance to allow chaining).
Inherited from SvgGroup.antiAlias
- Defined in src/core/core_svg.ts:184

append

append<K extends SvgItem>(item: K): K
Appends an SvgItem to this group.
Type Parameters
- K extends SvgItem
  The type of the SvgItem being appended.
Parameters
- item: K
  The SvgItem instance to append.
Returns K
The appended SvgItem instance.
Inherited from SvgGroup.append
- Defined in src/core/core_svg.ts:740

appendItems

appendItems<K extends SvgItem>(items: K[]): void
Type Parameters
- K extends SvgItem
Parameters
- items: K[]
Returns void
Inherited from SvgGroup.appendItems
- Defined in src/core/core_svg.ts:745

circle

circle(x: number, y: number, r1: number): SvgShape
Creates and appends an SVG circle element to this group. (Internally uses an ellipse with equal x and y radii).
Parameters
- x: number
  The x-coordinate of the center of the circle.
- y: number
  The y-coordinate of the center of the circle.
- r1: number
  The radius of the circle.
Returns SvgShape
The newly created SvgShape instance representing the circle.
Inherited from SvgGroup.circle
- Defined in src/core/core_svg.ts:801

clear

clear(): void
Clears all child elements from this SVG group.

Returns void
void
Inherited from SvgGroup.clear
- Defined in src/core/core_svg.ts:899

clear_transform

clear_transform(): SvgBuilder
remove all transformations

Returns SvgBuilder
Inherited from SvgGroup.clear_transform
- Defined in src/core/core_svg.ts:339

clip

clip(id: string): this
Parameters
- id: string
Returns this
Inherited from SvgGroup.clip
- Defined in src/core/core_svg.ts:311

ellipse

ellipse(x: number, y: number, r1: number, r2?: number): SvgShape
Creates and appends an SVG ellipse element to this group.
Parameters
- x: number
  The x-coordinate of the center of the ellipse.
- y: number
  The y-coordinate of the center of the ellipse.
- r1: number
  The x-radius of the ellipse.
- Optionalr2: number
  The y-radius of the ellipse.
Returns SvgShape
The newly created SvgShape instance representing the ellipse.
Inherited from SvgGroup.ellipse
- Defined in src/core/core_svg.ts:783

fill

fill(color: string): this
change the fill color
Parameters
- color: string
Returns this
Inherited from SvgGroup.fill
- Defined in src/core/core_svg.ts:193

getAttr

getAttr(name: string): string
return the given attribute if any
Parameters
- name: string
Returns string
Inherited from SvgGroup.getAttr
- Defined in src/core/core_svg.ts:211

getDom

getDom(): SVGElement
Returns SVGElement
the svh element dom
Inherited from SvgGroup.getDom
- Defined in src/core/core_svg.ts:110

getNumAttr

getNumAttr(name: string): number
return the attribute as number
Parameters
- name: string
Returns number
Inherited from SvgGroup.getNumAttr
- Defined in src/core/core_svg.ts:220

group

group(id?: string): SvgGroup
Creates and appends an SVG group element (<g>) to this group.
Parameters
- Optionalid: string
  Optional. An ID for the new group.
Returns SvgGroup
The newly created SvgGroup instance.
Inherited from SvgGroup.group
- Defined in src/core/core_svg.ts:861

icon

icon(svg: string, x: number, y: number, w: number, h: number): SvgIcon
Creates and appends an SvgIcon element to this group.
Parameters
- svg: string
  The SVG string content for the icon.
- x: number
  The x-coordinate for the icon's position.
- y: number
  The y-coordinate for the icon's position.
- w: number
  The width of the icon.
- h: number
  The height of the icon.
Returns SvgIcon
The newly created SvgIcon instance.
Inherited from SvgGroup.icon
- Defined in src/core/core_svg.ts:820

linear_gradient

linear_gradient(
    x1: number_or_perc,
    y1: number_or_perc,
    x2: number_or_perc,
    y2: number_or_perc,
): SvgGradient
Creates and appends an SVG linear gradient definition to this group.
Parameters
- x1: number_or_perc
  The x-coordinate of the starting point of the gradient vector.
- y1: number_or_perc
  The y-coordinate of the starting point of the gradient vector.
- x2: number_or_perc
  The x-coordinate of the ending point of the gradient vector.
- y2: number_or_perc
  The y-coordinate of the ending point of the gradient vector.
Returns SvgGradient
The newly created SvgGradient instance.
Example
```
const gradient = svgGroup.linear_gradient('0%', '0%', '0%', '100%')
                         .addStop(0, 'red')
                         .addStop(100, 'green');
svgGroup.rect(0, 0, 100, 100).fill(gradient.id);
```
Inherited from SvgGroup.linear_gradient
- Defined in src/core/core_svg.ts:888

no_fill

no_fill(): this
the element is not filled

Returns this
Inherited from SvgGroup.no_fill
- Defined in src/core/core_svg.ts:202

path

path(): SvgPath
Creates and appends an SvgPath element to this group.

Returns SvgPath
The newly created SvgPath instance.
Inherited from SvgGroup.path
- Defined in src/core/core_svg.ts:756

rect

rect(x: number, y: number, w: number, h: number): SvgShape
Creates and appends an SVG rectangle element to this group. Handles negative height by adjusting y and h accordingly.
Parameters
- x: number
  The x-coordinate of the top-left corner of the rectangle.
- y: number
  The y-coordinate of the top-left corner of the rectangle.
- w: number
  The width of the rectangle.
- h: number
  The height of the rectangle.
Returns SvgShape
The newly created SvgShape instance representing the rectangle.
Inherited from SvgGroup.rect
- Defined in src/core/core_svg.ts:841

removeClass

removeClass(cls: string): this
remove a class
Parameters
- cls: string
  class name to remove
Returns this
Inherited from SvgGroup.removeClass
- Defined in src/core/core_svg.ts:293

reset

reset(): SvgBuilder
Remove all attributes from the underlying DOM element.

Returns SvgBuilder
The current instance (this) to allow method chaining.
Inherited from SvgGroup.reset
- Defined in src/core/core_svg.ts:122

rotate

rotate(deg: number, cx: number, cy: number): this
rotation
Parameters
- deg: number
- cx: number
- cy: number
Returns this
Inherited from SvgGroup.rotate
- Defined in src/core/core_svg.ts:348

scale

scale(x: number): this
scaling
Parameters
- x: number
Returns this
Inherited from SvgGroup.scale
- Defined in src/core/core_svg.ts:376

setAttr

setAttr(name: string, value: string): this
define a new attribute
Parameters
- name: string
  attibute name
- value: string
  attribute value
Returns this
this
Inherited from SvgGroup.setAttr
- Defined in src/core/core_svg.ts:236

setStyle

setStyle<K extends keyof CSSStyleDeclaration>(
name: K,
value: string | number,
): this
change one style value
Type Parameters
- K extends keyof CSSStyleDeclaration
Parameters
- name: K
- value: string | number
Returns this
Inherited from SvgGroup.setStyle
- Defined in src/core/core_svg.ts:250

stroke

stroke(color: string, width?: number): this
change the stroke color
Parameters
- color: string
- Optionalwidth: number
Returns this
Inherited from SvgGroup.stroke
- Defined in src/core/core_svg.ts:137

strokeCap

strokeCap(cap: "butt" | "round" | "sqaure"): SvgBuilder
change the stroke cap
Parameters
- cap: "butt" | "round" | "sqaure"
Returns SvgBuilder
Inherited from SvgGroup.strokeCap
- Defined in src/core/core_svg.ts:159

strokeOpacity

strokeOpacity(opacity: number): SvgBuilder
change the stroke opacity attribute on the element.
Parameters
- opacity: number
  Opacity value where 0 is fully transparent and 1 is fully opaque.
Returns SvgBuilder
The current instance to allow method chaining.
Inherited from SvgGroup.strokeOpacity
- Defined in src/core/core_svg.ts:169

strokeWidth

strokeWidth(width: number): this
change the stroke width
Parameters
- width: number
Returns this
Inherited from SvgGroup.strokeWidth
- Defined in src/core/core_svg.ts:149

text

text(x: number, y: number, txt: string): SvgText
Creates and appends an SvgText element to this group.
Parameters
- x: number
  The x-coordinate for the text.
- y: number
  The y-coordinate for the text.
- txt: string
  The text content.
Returns SvgText
The newly created SvgText instance.
Inherited from SvgGroup.text
- Defined in src/core/core_svg.ts:768

transform

transform(tr: string): this
define the whole transformation
Parameters
- tr: string
Returns this
Inherited from SvgGroup.transform
- Defined in src/core/core_svg.ts:320

translate

translate(dx: number, dy: number): this
translation
Parameters
- dx: number
- dy: number
Returns this
Inherited from SvgGroup.translate
- Defined in src/core/core_svg.ts:362

Class SvgBuilder

Hierarchy (View Summary)

Index

Constructors

Properties

Methods

Constructors

constructor

Returns SvgBuilder

Properties

Protected_dom

Methods

add_rotation

Parameters

Returns this

add_scale

Parameters

Returns this

add_transformation

Parameters

Returns this

add_translation

Parameters

Returns this

addClass

Parameters

Returns this

addClip

Parameters

Returns { clip: SvgGroup; id: string }

clip: SvgGroup

id: string

Param: x

Param: y

Param: w

Param: h

Returns

addDOMEvent

Type Parameters

Parameters

Returns SvgBuilder

addPattern

Parameters

Returns { id: string; pat: SvgGroup }

id: string

Param: x

Param: y

Param: w

Param: h

Returns

pat: SvgGroup

antiAlias

Parameters

Returns SvgBuilder

append

Type Parameters

Parameters

Returns K

appendItems

Type Parameters

Parameters

Returns void

circle

Parameters

Returns SvgShape

clear

Returns void

clear_transform

Returns SvgBuilder

clip

Parameters

Returns this

ellipse

Parameters

Returns SvgShape

fill

Parameters

Returns this

getAttr

Parameters

`Protected`_dom