Class SvgGroup

Represents an SVG group element (<g>), which can contain other SVG elements. It extends SvgItem and provides methods for appending various SVG shapes and gradients.

Hierarchy (View Summary)

SvgItem
- SvgGroup
  - SvgBuilder

Index

Constructors

constructor

new SvgGroup(tag?: string): SvgGroup
Creates an instance of SvgGroup.
Parameters
- tag: string = "g"
  The SVG tag name for the group element (defaults to "g").
Returns SvgGroup
Overrides SvgItem.constructor
- Defined in src/core/core_svg.ts:726

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 SvgItem.add_rotation
- Defined in src/core/core_svg.ts:353

add_scale

add_scale(x: number): this
Parameters
- x: number
Returns this
Inherited from SvgItem.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 SvgItem.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 SvgItem.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 SvgItem.addClass
- Defined in src/core/core_svg.ts:273

addDOMEvent

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

antiAlias

antiAlias(set: boolean): SvgGroup
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 SvgGroup
the current instance to allow chaining).
Inherited from SvgItem.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.
- 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
- 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.
- Defined in src/core/core_svg.ts:801

clear

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

Returns void
void
- Defined in src/core/core_svg.ts:899

clear_transform

clear_transform(): SvgGroup
remove all transformations

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

clip

clip(id: string): this
Parameters
- id: string
Returns this
Inherited from SvgItem.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.
- Defined in src/core/core_svg.ts:783

fill

fill(color: string): this
change the fill color
Parameters
- color: string
Returns this
Inherited from SvgItem.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 SvgItem.getAttr
- Defined in src/core/core_svg.ts:211

getDom

getDom(): SVGElement
Returns SVGElement
the svh element dom
Inherited from SvgItem.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 SvgItem.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.
- 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.
- 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);
```
- Defined in src/core/core_svg.ts:888

no_fill

no_fill(): this
the element is not filled

Returns this
Inherited from SvgItem.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.
- 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.
- 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 SvgItem.removeClass
- Defined in src/core/core_svg.ts:293

reset

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

Returns SvgGroup
The current instance (this) to allow method chaining.
Inherited from SvgItem.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 SvgItem.rotate
- Defined in src/core/core_svg.ts:348

scale

scale(x: number): this
scaling
Parameters
- x: number
Returns this
Inherited from SvgItem.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 SvgItem.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 SvgItem.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 SvgItem.stroke
- Defined in src/core/core_svg.ts:137

strokeCap

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

strokeOpacity

strokeOpacity(opacity: number): SvgGroup
change the stroke opacity attribute on the element.
Parameters
- opacity: number
  Opacity value where 0 is fully transparent and 1 is fully opaque.
Returns SvgGroup
The current instance to allow method chaining.
Inherited from SvgItem.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 SvgItem.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.
- Defined in src/core/core_svg.ts:768

transform

transform(tr: string): this
define the whole transformation
Parameters
- tr: string
Returns this
Inherited from SvgItem.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 SvgItem.translate
- Defined in src/core/core_svg.ts:362

Class SvgGroup

Hierarchy (View Summary)

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

Returns SvgGroup

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

addDOMEvent

Type Parameters

Parameters

Returns SvgGroup

antiAlias

Parameters

Returns SvgGroup

append

Type Parameters

Parameters

Returns K

appendItems

Type Parameters

Parameters

Returns void

circle

Parameters

Returns SvgShape

clear

Returns void

clear_transform

Returns SvgGroup

clip

Parameters

Returns this

ellipse

Parameters

Returns SvgShape

fill

Parameters

Returns this

getAttr

Parameters

Returns string

getDom

Returns SVGElement

getNumAttr

Parameters

Returns number

group

Parameters

Returns SvgGroup

icon

Parameters

Returns SvgIcon

linear_gradient

Parameters

Returns SvgGradient

Example

no_fill

Returns this

path

`Protected`_dom