SVGGraphicsNode

class SVGGraphicsNode extends PIXI.Graphics

This node can be used to directly embed the following elements:

Interface	Element
SVGGElement	<g />
SVGCircleElement	<circle />
SVGLineElement	<line />
SVGPolylineElement	<polyline />
SVGPolygonElement	<polygon />
SVGRectElement	<rect />

It also provides an implementation for dashed stroking, by adding the dashArray and dashOffset properties to LineStyle.

Summary

Methods from SVGGraphicsNode

this	ellipticArc(cx: number, cy: number, rx: number, ry: number, startAngle: number, endAngle: number, xAxisRotation: number, anticlockwise: boolean) Draws an elliptical arc.
this	ellipticArcTo(endX: number, endY: number, rx: number, ry: number, xAxisRotation: number, anticlockwise: boolean, largeArc: boolean) Draws an elliptical arc to the specified point.
void	embedCircle(element: SVGCircleElement) Embeds the `SVGCircleElement` into this node.
void	embedEllipse(element: SVGEllipseElement) Embeds the `SVGEllipseElement` into this node.
void	embedLine(element: SVGLineElement) Embeds the `SVGLineElement` into this node.
void	embedPolygon(element: SVGPolygonElement) Embeds the `SVGPolygonElement` element into this node.
void	embedPolyline(element: SVGPolylineElement) Embeds the `SVGPolylineElement` element into this node.
void	embedRect(element: SVGRectElement) Embeds the `SVGRectElement` into this node.
void	render(renderer: PIXI.Renderer)

Properties inherited from Graphics

PIXI.BLEND_MODES	blendMode = PIXI.BLEND_MODES.NORMAL
boolean	cacheAsBitmap = false
PIXI.Polygon	currentPath = undefined
PIXI.FillStyle	fill
PIXI.GraphicsGeometry	geometry
PIXI.LineStyle	line
string	pluginName = "batch" Renderer plugin for batching
PIXI.Shader	shader = undefined
number	tint = 0xFFFFFF
PIXI.FillStyle	protected _fillStyle Current fill style.
boolean	protected _holeMode = false Current hole mode is enabled.
PIXI.LineStyle	protected _lineStyle Current line style.
PIXI.Matrix	protected _matrix = undefined Current shape transform matrix.
number	protected batchDirty = -1 Update dirty for limiting calculating batches.
Array<IGraphicsBatchElement>	protected batches A collections of batches! These can be drawn by the renderer batch system.
number	protected batchTint = -1 Update dirty for limiting calculating tints for batches.
Float32Array	protected vertexData = undefined Copy of the object vertex data.

Properties inherited from Container

T[]	children
number	height The height of the Container, setting this will actually modify the scale to achieve the value set.
boolean	interactiveChildren = true
boolean	sortableChildren
boolean	sortDirty Should children be sorted by zIndex at the next updateTransform call.
number	width The width of the Container, setting this will actually modify the scale to achieve the value set.

Properties inherited from DisplayObject

boolean	_accessibleActive = false
boolean	_accessibleDiv = undefined
PIXI.Bounds	_bounds The bounds object, this is used to calculate and store the bounds of the displayObject.
PIXI.Bounds	_localBounds Local bounds object, swapped with `_bounds` when using `getLocalBounds()`.
boolean	accessible = false
boolean	accessibleChildren = true
string	accessibleHint = undefined
string	accessiblePointerEvents = 'auto'
?string	accessibleTitle = undefined
string	accessibleType = 'button'
number	alpha The opacity of the object.
number	angle
boolean	buttonMode
number	cacheAsBitmapMultisample = PIXI.MSAA_QUALITY.NONE
number	cacheAsBitmapResolution = null
boolean	cullable Should this object be rendered if the bounds of this object are out of frame?
PIXI.Rectangle	cullArea
string	cursor = undefined
boolean	destroyed Readonly flag for destroyed display objects.
PIXI.Rectangle	filterArea
PIXI.Filter[] \| null	filters
PIXI.IHitArea	hitArea = undefined
boolean	interactive = false
boolean	isMask Does any other displayObject use this object as a mask?
boolean	isSprite Used to fast check if a sprite is.. a sprite!
PIXI.Matrix	localTransform
PIXI.Container \| PIXI.MaskData \| null	mask
string	name = undefined
PIXI.Container	parent The display object container that contains this display object.
PIXI.ObservablePoint	pivot
PIXI.ObservablePoint	position
boolean	renderable
number	rotation
PIXI.ObservablePoint	scale The scale factors of this object along the local coordinate axes.
PIXI.ObservablePoint	skew
PIXI.DisplayObject	smartMask = undefined
PIXI.Transform	transform
boolean	visible
number	worldAlpha
PIXI.Matrix	worldTransform
boolean	worldVisible
number	x
number	y
number	zIndex The zIndex of the displayObject.
number	protected _boundsID Flags the cached bounds as dirty.
PIXI.Rectangle	protected _boundsRect Cache of this display-object's bounds-rectangle.
boolean	protected _destroyed If the object has been destroyed via destroy(). If true, it should not be used.
PIXI.Filter[]	protected _enabledFilters
number	protected _lastSortedIndex
PIXI.Rectangle	protected _localBoundsRect Cache of this display-object's local-bounds rectangle.
PIXI.Container \| PIXI.MaskData	protected _mask
PIXI.Container	protected _tempDisplayObjectParent
number	protected _zIndex

Methods inherited from Graphics

this	arc(cx: number, cy: number, radius: number, startAngle: number, endAngle: number, anticlockwise: boolean)
this	arcTo(x1: number, y1: number, x2: number, y2: number, radius: number) The arcTo() method creates an arc/curve between two tangents on the canvas.
this	beginFill(color: number, alpha: number)
this	beginHole()
PIXI.Graphics	beginTextureFill(options: IFillStyleOptions)
this	bezierCurveTo(cpX: number, cpY: number, cpX2: number, cpY2: number, toX: number, toY: number)
this	clear()
PIXI.Graphics	clone()
this	closePath()
boolean	containsPoint(point: IPointData)
void	destroy(options: IDestroyOptions \| boolean)
PIXI.Graphics	drawChamferRect(this: PIXI.Graphics, x: number, y: number, width: number, height: number, chamfer: number) Draw Rectangle with chamfer corners. These are angled corners.
this	drawCircle(x: number, y: number, radius: number)
this	drawEllipse(x: number, y: number, width: number, height: number)
PIXI.Graphics	drawFilletRect(this: PIXI.Graphics, x: number, y: number, width: number, height: number, fillet: number)
this	drawPolygon(path: Array<number> \| Array<PIXI.IPointData> \| PIXI.Polygon)
this	drawRect(x: number, y: number, width: number, height: number)
PIXI.Graphics	drawRegularPolygon(this: PIXI.Graphics, x: number, y: number, radius: number, sides: number, rotation: number) Draw a regular polygon where all sides are the same length.
PIXI.Graphics	drawRoundedPolygon(this: PIXI.Graphics, x: number, y: number, radius: number, sides: number, corner: number, rotation: number) Draw a regular polygon with rounded corners.
this	drawRoundedRect(x: number, y: number, width: number, height: number, radius: number)
this	drawShape(shape: PIXI.Circle \| PIXI.Ellipse \| PIXI.Polygon \| PIXI.Rectangle \| PIXI.RoundedRectangle)
PIXI.Graphics	drawStar(this: PIXI.Graphics, x: number, y: number, points: number, radius: number, innerRadius: number, rotation: number) Draw a star shape with an arbitrary number of points.
PIXI.Graphics	drawTorus(this: PIXI.Graphics, x: number, y: number, innerRadius: number, outerRadius: number, startArc: number, endArc: number) Draw a torus shape, like a donut. Can be used for something like a circle loader.
this	endFill()
this	endHole()
PIXI.Texture	generateCanvasTexture(scaleMode: PIXI.SCALE_MODES, resolution: number)
boolean	isFastRect()
this	lineStyle(width: ILineStyleOptions \| number, color: number, alpha: number, alignment: number, native: boolean)
PIXI.Graphics	lineStyle(options: ILineStyleOptions)
PIXI.Graphics	lineTextureStyle(options: ILineStyleOptions)
this	lineTo(x: number, y: number)
this	moveTo(x: number, y: number)
this	quadraticCurveTo(cpX: number, cpY: number, toX: number, toY: number)
this	setMatrix(matrix: PIXI.Matrix)
void	protected _calculateBounds() Retrieves the bounds of the graphic shape as a rectangle object.
void	protected _initCurve(x: number, y: number)
void	protected _populateBatches() Populating batches for rendering.
void	protected _render(renderer: PIXI.Renderer)
void	protected _renderBatched(renderer: PIXI.Renderer)
void	protected _renderDirect(renderer: PIXI.Renderer)
void	protected _renderDrawCallDirect(renderer: PIXI.Renderer, drawCall: PIXI.BatchDrawCall)
PIXI.Shader	protected _resolveDirectShader(renderer: PIXI.Renderer)
void	protected calculateTints() Recalculate the tint by applying tint to batches using Graphics tint.
void	protected calculateVertices() If there's a transform update or a change to the shape of the geometry, recalculate the vertices.
void	protected finishPoly()
void	protected startPoly()

Methods inherited from Container

PIXI.DisplayObject	addChild(children: PIXI.DisplayObject) Adds one or more children to the container.
PIXI.DisplayObject	addChildAt(child: PIXI.DisplayObject, index: number)
void	calculateBounds() Recalculates the bounds of the container.
	containerUpdateTransform()
T	getChildAt(index: number)
PIXI.DisplayObject	getChildByName(name: string, deep: boolean) Returns the display object in the container.
number	getChildIndex(child: T)
PIXI.Rectangle	getLocalBounds(rect: PIXI.Rectangle, skipChildrenUpdate: boolean) Retrieves the local bounds of the displayObject as a rectangle object.
PIXI.DisplayObject	removeChild(children: PIXI.DisplayObject)
T	removeChildAt(index: number)
T[]	removeChildren(beginIndex: number, endIndex)
void	renderCanvas(renderer: PIXI.CanvasRenderer)
void	setChildIndex(child: T, index: number)
void	sortChildren() Sorts children by zIndex. Previous order is maintained for 2 children with the same zIndex.
void	swapChildren(child: T, child2: T)
void	updateTransform() Updates the transform on all children of this container for rendering.
void	protected _renderWithCulling(renderer: PIXI.Renderer)
void	protected onChildrenChange(_length: number)
void	protected renderAdvanced(renderer: PIXI.Renderer)

Methods inherited from DisplayObject

	addEventListener(type: string, listener: EventListenerOrEventListenerObject, options: boolean \| AddEventListenerOptions)
void	disableTempParent(cacheParent: PIXI.Container)
boolean	dispatchEvent(e: Event) Dispatch the event on this PIXI.DisplayObject using the event's PIXI.EventBoundary.
	displayObjectUpdateTransform()
PIXI.Container	enableTempParent() Used in Renderer, cacheAsBitmap and other places where you call an `updateTransform` on root
PIXI.Rectangle	getBounds(skipUpdate: boolean, rect: PIXI.Rectangle) Calculates and returns the (world) bounds of the display object as a Rectangle.
PIXI.Point	getGlobalPosition(point: PIXI.Point, skipUpdate: boolean)
	removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options: boolean \| AddEventListenerOptions)
PIXI.Container	setParent(container: PIXI.Container)
this	setTransform(x: number, y: number, scaleX: number, scaleY: number, rotation: number, skewX: number, skewY: number, pivotX: number, pivotY: number)
P	toGlobal(position: IPointData, point: P, skipUpdate: boolean)
P	toLocal(position: IPointData, from: PIXI.DisplayObject, point: P, skipUpdate: boolean)
PIXI.Rectangle	updateSmartMask(recursive: boolean, skipUpdate: boolean)
void	protected _recursivePostUpdateTransform() Recursively updates transform of all objects from the root to this one internal function for toLocal()

Inherited Events from Container

childAdded

Inherited Events from DisplayObject

	added
	childRemoved
	click
	clickcapture Capture phase equivalent of `click`.
	destroyed
	mousedown
	mousedowncapture Capture phase equivalent of `mousedown`.
	mouseenter Fired when the mouse pointer is moved over a DisplayObject and its descendant's hit testing boundaries.
	mouseentercapture Capture phase equivalent of `mouseenter`
	mouseleave Fired when the mouse pointer exits a DisplayObject and its descendants.
	mouseleavecapture Capture phase equivalent of `mouseleave`.
	mousemove
	mousemovecature Capture phase equivalent of `mousemove`.
	mouseout
	mouseoutcapture Capture phase equivalent of `mouseout`.
	mouseover
	mouseovercapture Capture phase equivalent of `mouseover`.
	mouseup
	mouseupcature Capture phase equivalent of `mouseup`.
	mouseupoutside
	mouseupoutsidecapture Capture phase equivalent of `mouseupoutside`.
	pointercancel
	pointercancelcapture Capture phase equivalent of `pointercancel`.
	pointerdown
	pointerdowncapture Capture phase equivalent of `pointerdown`.
	pointerenter Fired when the pointer is moved over a DisplayObject and its descendant's hit testing boundaries.
	pointerentercapture Capture phase equivalent of `pointerenter`
	pointerleave Fired when the pointer leaves the hit testing boundaries of a DisplayObject and its descendants.
	pointerleavecapture Capture phase equivalent of `pointerleave`.
	pointermove
	pointermovecapture Capture phase equivalent of `pointermove`.
	pointerout
	pointeroutcapture Capture phase equivalent of `pointerout`.
	pointerover
	pointerovercapture Capture phase equivalent of `pointerover`.
	pointertap
	pointertapcapture Capture phase equivalent of `pointertap`.
	pointerup
	pointerupcapture Capture phase equivalent of `pointerup`.
	pointerupoutside
	pointerupoutsidecapture Capture phase equivalent of `pointerupoutside`.
	removed
	rightclick
	rightclickcapture Capture phase equivalent of `rightclick`.
	rightdown
	rightdowncapture Capture phase equivalent of `rightdown`.
	rightup
	rightupcapture Capture phase equivalent of `rightup`.
	rightupoutside
	rightupoutsidecapture Capture phase equivalent of `rightupoutside`.
	tap
	tapcapture Capture phase equivalent of `tap`.
	touchcancel
	touchcancelcapture Capture phase equivalent of `touchcancel`.
	touchend
	touchendcapture Capture phase equivalent of `touchend`.
	touchendoutside
	touchendoutsidecapture Capture phase equivalent of `touchendoutside`.
	touchmove
	touchmovecapture Capture phase equivalent of `touchmove`.
	touchstart
	touchstartcapture Capture phase equivalent of `touchstart`.
PIXI.FederatedWheelEvent	wheel Fired when a the user scrolls with the mouse cursor over a DisplayObject.
PIXI.FederatedWheelEvent	wheelcapture Capture phase equivalent of `wheel`.

Public Methods

ellipticArc SVGGraphicsNode.ts:120

ellipticArc(cx: number, cy: number, rx: number, ry: number, startAngle: number, endAngle: number, xAxisRotation: number, anticlockwise: boolean) → {this}

Draws an elliptical arc.

Parameters:
Name	Type	Default	Description
cx	number		The x-coordinate of the center of the ellipse.
cy	number		The y-coordinate of the center of the ellipse.
rx	number		The radius along the x-axis.
ry	number		The radius along the y-axis.
startAngle	number		The starting eccentric angle, in radians (0 is at the 3 o'clock position of the arc's circle).
endAngle	number		The ending eccentric angle, in radians.
xAxisRotation	number	0	The angle of the whole ellipse w.r.t. x-axis.
anticlockwise	boolean	false	Specifies whether the drawing should be counterclockwise or clockwise.

Returns:
Type	Description
this	This Graphics object. Good for chaining method calls.

ellipticArcTo SVGGraphicsNode.ts:174

ellipticArcTo(endX: number, endY: number, rx: number, ry: number, xAxisRotation: number, anticlockwise: boolean, largeArc: boolean) → {this}

Draws an elliptical arc to the specified point.

If rx = 0 or ry = 0, then a line is drawn. If the radii provided are too small to draw the arc, then they are scaled up appropriately.

Parameters:
Name	Type	Default	Description
endX	number		the x-coordinate of the ending point.
endY	number		the y-coordinate of the ending point.
rx	number		The radius along the x-axis.
ry	number		The radius along the y-axis.
xAxisRotation	number	0	The angle of the ellipse as a whole w.r.t/ x-axis.
anticlockwise	boolean	false	Specifies whether the arc should be drawn counterclockwise or clockwise.
largeArc	boolean	false	Specifies whether the larger arc of two possible should be choosen.

Returns:
Type	Description
this	This Graphics object. Good for chaining method calls.

See:

embedCircle SVGGraphicsNode.ts:282

embedCircle(element: SVGCircleElement) → {void}

Embeds the SVGCircleElement into this node.

Parameters:
Name	Type	Description
element	SVGCircleElement	The circle element to draw.

Returns:
Type	Description
void

embedEllipse SVGGraphicsNode.ts:300

embedEllipse(element: SVGEllipseElement) → {void}

Embeds the SVGEllipseElement into this node.

Parameters:
Name	Type	Description
element	SVGEllipseElement	The ellipse element to draw.

Returns:
Type	Description
void

embedLine SVGGraphicsNode.ts:327

embedLine(element: SVGLineElement) → {void}

Embeds the SVGLineElement into this node.

Parameters:
Name	Type	Description
element	SVGLineElement	The line element to draw.

Returns:
Type	Description
void

embedPolygon SVGGraphicsNode.ts:387

embedPolygon(element: SVGPolygonElement) → {void}

Embeds the SVGPolygonElement element into this node.

Parameters:
Name	Type	Description
element	SVGPolygonElement	The polygon element to draw.

Returns:
Type	Description
void

embedPolyline SVGGraphicsNode.ts:408

embedPolyline(element: SVGPolylineElement) → {void}

Embeds the SVGPolylineElement element into this node.

Parameters:
Name	Type	Description
element	SVGPolylineElement	The polyline element to draw.

Returns:
Type	Description
void

embedRect SVGGraphicsNode.ts:348

embedRect(element: SVGRectElement) → {void}

Embeds the SVGRectElement into this node.

Parameters:
Name	Type	Description
element	SVGRectElement	The rectangle element to draw.

Returns:
Type	Description
void

render SVGGraphicsNode.ts:427

render(renderer: PIXI.Renderer) → {void}

Parameters:
Name	Type	Description
renderer	PIXI.Renderer

Returns:
Type	Description
void