SVGScene

class SVGScene extends PIXI.DisplayObject

SVGScene can be used to build an interactive viewer for scalable vector graphics images. You must specify the size of the svg viewer.

SVG Scene Graph

SVGScene has an internal, disconnected scene graph that is optimized for lazy updates. It will listen to the following events fired by a node:

nodetransformdirty: This will invalidate the transform calculations.

Constructor

new SVGScene(content: SVGSVGElement, context: Partial<SVGSceneContext>) → {}

Parameters:
Name	Type	Attributes	Description
content	SVGSVGElement		The SVG node to render
context	Partial<SVGSceneContext>	<optional>	This can be used to configure the scene

Summary

Properties from SVGScene

SVGSVGElement	content The SVG image content being rendered by the scene.
number	height
PIXI.Container	renderServers
PIXI.Container	root The root display object of the scene.
number	width
SVGSceneContext	protected _context The scene context
Cull	protected _cull This is used to cull the SVG scene graph before rendering.
number	protected _height The height of the rendered scene in local space.
boolean	protected _transformDirty Flags whether any transform is dirty in the SVG scene graph.
number	protected _width The width of the rendered scene in local space.

Methods from SVGScene

Promise<SVGScene>	static from(url: string, context: SVGSceneContext) Load the SVG document and create a SVGScene asynchronously.
void	calculateBounds()
void	render(renderer: PIXI.Renderer)
void	updateTransform()
MaskServer	protected createMask(ref: SVGMaskElement \| PIXI.Container) Creates a lazy luminance mask for the `SVGMaskElement` or its rendering node.
PIXI.Container	protected createNode(element: SVGElement) Creates a display object that implements the corresponding `embed*` method for the given node.
Paint	protected createPaint(element: SVGElement)
PaintServer	protected createPaintServer(paintServer: SVGGradientElement) Creates a lazy paint texture for the paint server.
{ paint : Paint }	protected embedIntoNode(node: PIXI.Container, element: SVGGraphicsElement \| SVGMaskElement, options: { basePaint? : Paint }) Embeds a content `element` into the rendering `node`.
string	protected parseReference(url: string)
void	protected populateScene() Populates the entire SVG scene. This should only be called once after the SVGScene.content has been set.
PIXI.Container	protected populateSceneRecursive(element: SVGElement, options: { basePaint? : Paint }) Recursively populates a subscene graph that embeds `element`. The root of the subscene is returned.
Paint	protected queryInheritedPaint(ref: SVGElement) Returns an (uncached) inherited paint of a content element.
MaskServer	protected queryMask(ref: SVGMaskElement) Returns the rendering node for a mask.
Paint	protected queryPaint(ref: SVGElement)

Events from SVGScene

	click
	mousedown
	mousemove
	mouseout
	mouseover
	mouseup
	mouseupoutside
	pointercancel
	pointerdown
	pointermove
	pointerout
	pointerover
	pointertap
	pointerup
	pointerupoutside
	rightclick
	rightdown
	rightup
	rightupoutside
	tap
	touchcancel
	touchend
	touchendoutside
	touchmove
	touchstart

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
boolean	cacheAsBitmap
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 DisplayObject

	addEventListener(type: string, listener: EventListenerOrEventListenerObject, options: boolean \| AddEventListenerOptions)
void	destroy(_options: IDestroyOptions \| boolean)
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)
PIXI.Rectangle	getLocalBounds(rect: PIXI.Rectangle)
	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 DisplayObject

	added
	childRemoved
	clickcapture Capture phase equivalent of `click`.
	destroyed
	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`.
	mousemovecature Capture phase equivalent of `mousemove`.
	mouseoutcapture Capture phase equivalent of `mouseout`.
	mouseovercapture Capture phase equivalent of `mouseover`.
	mouseupcature Capture phase equivalent of `mouseup`.
	mouseupoutsidecapture Capture phase equivalent of `mouseupoutside`.
	pointercancelcapture Capture phase equivalent of `pointercancel`.
	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`.
	pointermovecapture Capture phase equivalent of `pointermove`.
	pointeroutcapture Capture phase equivalent of `pointerout`.
	pointerovercapture Capture phase equivalent of `pointerover`.
	pointertapcapture Capture phase equivalent of `pointertap`.
	pointerupcapture Capture phase equivalent of `pointerup`.
	pointerupoutsidecapture Capture phase equivalent of `pointerupoutside`.
	removed
	rightclickcapture Capture phase equivalent of `rightclick`.
	rightdowncapture Capture phase equivalent of `rightdown`.
	rightupcapture Capture phase equivalent of `rightup`.
	rightupoutsidecapture Capture phase equivalent of `rightupoutside`.
	tapcapture Capture phase equivalent of `tap`.
	touchcancelcapture Capture phase equivalent of `touchcancel`.
	touchendcapture Capture phase equivalent of `touchend`.
	touchendoutsidecapture Capture phase equivalent of `touchendoutside`.
	touchmovecapture Capture phase equivalent of `touchmove`.
	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 Properties

content SVGScene.ts:40

content: SVGSVGElement

The SVG image content being rendered by the scene.

height SVGScene.ts:792

height: number

The height at which the SVG scene is being rendered. By default, this is the viewbox height specified by the root element.

renderServers SVGScene.ts:50

renderServers: PIXI.Container

Display objects that don't render to the screen, but are required to update before the rendering nodes, e.g. mask sprites.

root SVGScene.ts:45

root: PIXI.Container

The root display object of the scene.

width SVGScene.ts:778

width: number

The width at which the SVG scene is being rendered. By default, this is the viewbox width specified by the root element.

Protected Properties

_context SVGScene.ts:56

protected _context: SVGSceneContext

The scene context

_cull SVGScene.ts:71

protected _cull: Cull

This is used to cull the SVG scene graph before rendering.

_height SVGScene.ts:66

protected _height: number

The height of the rendered scene in local space.

_transformDirty SVGScene.ts:88

protected _transformDirty: boolean

Flags whether any transform is dirty in the SVG scene graph.

_width SVGScene.ts:61

protected _width: number

The width of the rendered scene in local space.

Public Methods

from SVGScene.ts:806

static from(url: string, context: SVGSceneContext) → {Promise<SVGScene>}

Load the SVG document and create a SVGScene asynchronously.

A cache is used for loaded SVG documents.

Parameters:
Name	Type	Attributes	Description
url	string
context	SVGSceneContext	<optional>

Returns:
Type	Description
Promise<SVGScene>

calculateBounds SVGScene.ts:130

calculateBounds() → {void}

Calculates the bounds of this scene, which is defined by the set width and height. The contents of this scene are scaled to fit these bounds, and don't affect them whatsoever.

Returns:
Type	Description
void

render SVGScene.ts:153

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

Parameters:
Name	Type	Description
renderer	PIXI.Renderer

Returns:
Type	Description
void

updateTransform SVGScene.ts:177

updateTransform() → {void}

Returns:
Type	Description
void

Protected Methods

createMask SVGScene.ts:293

protected createMask(ref: SVGMaskElement | PIXI.Container) → {MaskServer}

Creates a lazy luminance mask for the SVGMaskElement or its rendering node.

Parameters:
Name	Type	Description
ref	SVGMaskElement \| PIXI.Container	The `SVGMaskElement` or its rendering node, if already generated.

Returns:
Type	Description
MaskServer

createNode SVGScene.ts:214

protected createNode(element: SVGElement) → {PIXI.Container}

Creates a display object that implements the corresponding embed* method for the given node.

Parameters:
Name	Type	Description
element	SVGElement	The element to be embedded in a display object.

Returns:
Type	Description
PIXI.Container

createPaint SVGScene.ts:258

protected createPaint(element: SVGElement) → {Paint}

Creates a Paint object for the given element. This should only be used when sharing the Paint is not desired; otherwise, use SVGScene.queryPaint.

This will return null if the passed element is not an instance of SVGElement.

Parameters:
Name	Type	Description
element	SVGElement

Returns:
Type	Description
Paint

createPaintServer SVGScene.ts:277

protected createPaintServer(paintServer: SVGGradientElement) → {PaintServer}

Creates a lazy paint texture for the paint server.

Parameters:
Name	Type	Description
paintServer	SVGGradientElement	The paint server to be rendered.

Returns:
Type	Description
PaintServer

embedIntoNode SVGScene.ts:406

protected embedIntoNode(node: PIXI.Container, element: SVGGraphicsElement | SVGMaskElement, options: { basePaint? : Paint }) → {{ paint : Paint }}

Embeds a content element into the rendering node.

This is not a stable API.

Parameters:
Name	Type	Attributes	Description
node	PIXI.Container		The node in this scene that will render the `element`.
element	SVGGraphicsElement \| SVGMaskElement		The content `element` to be rendered. This must be an element of the SVG document fragment under `this.content`.
options	{ basePaint? : Paint }		Additional options
options.basePaint	Paint	<optional>	The base paint that the element's paint should inherit from

Returns:
Type	Description
{ paint : Paint }	The base attributes of the element, like paint.

parseReference SVGScene.ts:383

protected parseReference(url: string) → {string}

Parses the internal URL reference into a selector (that can be used to find the referenced element using this.content.querySelector).

Parameters:
Name	Type	Description
url	string	The reference string, e.g. "url(#id)", "url('#id')", "#id"

Returns:
Type	Description
string

populateScene SVGScene.ts:751

protected populateScene() → {void}

Populates the entire SVG scene. This should only be called once after the SVGScene.content has been set.

Returns:
Type	Description
void

populateSceneRecursive SVGScene.ts:634

protected populateSceneRecursive(element: SVGElement, options: { basePaint? : Paint }) → {PIXI.Container}

Recursively populates a subscene graph that embeds element. The root of the subscene is returned.

Parameters:
Name	Type	Attributes	Description
element	SVGElement		The SVGElement to be embedded.
options	{ basePaint? : Paint }	<optional>	Inherited attributes from the element's parent, if any.

Returns:
Type	Description
PIXI.Container	The display object that embeds the element for rendering.

queryInheritedPaint SVGScene.ts:364

protected queryInheritedPaint(ref: SVGElement) → {Paint}

Returns an (uncached) inherited paint of a content element.

Parameters:
Name	Type	Description
ref	SVGElement

Returns:
Type	Description
Paint

queryMask SVGScene.ts:324

protected queryMask(ref: SVGMaskElement) → {MaskServer}

Returns the rendering node for a mask.

Parameters:
Name	Type	Description
ref	SVGMaskElement	The mask element whose rendering node is needed.

Returns:
Type	Description
MaskServer

queryPaint SVGScene.ts:344

protected queryPaint(ref: SVGElement) → {Paint}

Returns the cached paint of a content element. The returned paint will not account for any paint attributes inherited from ancestor elements.

Parameters:
Name	Type	Description
ref	SVGElement	A reference to the content element.

Returns:
Type	Description
Paint

Events

click EventBoundary.ts:1397

Fired when a pointer device button (usually a mouse left-button) is pressed and released on the display object. DisplayObject's interactive property must be set to true to fire event.

A click event fires after the pointerdown and pointerup events, in that order. If the mouse is moved over another DisplayObject after the pointerdown event, the click event is fired on the most specific common ancestor of the two target DisplayObjects.

The detail property of the event is the number of clicks that occurred within a 200ms window of each other upto the current click. For example, it will be 2 for a double click.