Options
All
  • Public
  • Public/Protected
  • All
Menu

Class mxSvgCanvas2D

Extends mxAbstractCanvas2D to implement a canvas for SVG. This canvas writes all calls as SVG output to the given SVG root node.

example
var svgDoc = mxUtils.createXmlDocument();
var root = (svgDoc.createElementNS != null) ?
        svgDoc.createElementNS(mxConstants.NS_SVG, 'svg') : svgDoc.createElement('svg');

if (svgDoc.createElementNS == null)
{
  root.setAttribute('xmlns', mxConstants.NS_SVG);
  root.setAttribute('xmlns:xlink', mxConstants.NS_XLINK);
}
else
{
  root.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', mxConstants.NS_XLINK);
}

var bounds = graph.getGraphBounds();
root.setAttribute('width', (bounds.x + bounds.width + 4) + 'px');
root.setAttribute('height', (bounds.y + bounds.height + 4) + 'px');
root.setAttribute('version', '1.1');

svgDoc.appendChild(root);

var svgCanvas = new mxSvgCanvas2D(root);

To disable anti-aliasing in the output, use the following code.

example
graph.view.canvas.ownerSVGElement.setAttribute('shape-rendering', 'crispEdges');

Or set the respective attribute in the SVG element directly.

Hierarchy

Index

Constructors

Properties

Methods

Constructors

constructor

  • new mxSvgCanvas2D(root: Element, styleEnabled?: boolean): mxSvgCanvas2D

  • Parameters

    • root: Element

      SVG container for the output

    • Optional styleEnabled: boolean

      Optional boolean that specifies if a style section should be added. The style section sets the default font-size, font-family and stroke-miterlimit globally. Default is false.

    Returns mxSvgCanvas2D

Properties

cacheOffsetSize

cacheOffsetSize: boolean

Specifies if offsetWidth and offsetHeight should be cached. This is used to speed up repaint of text in updateText.

default

true

closeOp

closeOp: string

Holds the operator for closing curves.

default

'Z'

curveOp

curveOp: string

Contains the string used for bezier curves.

default

'C'

defs

defs: Element

Reference to the defs section of the SVG document. Only for export.

foAltText

foAltText: string

Specifies the fallback text for unsupported foreignObjects in exported documents. If this is set to null then no fallback text is added to the exported document.

default

[Object]

foEnabled

foEnabled: boolean

Specifies if use of foreignObject for HTML markup is allowed.

default

true

foOffset

foOffset: number

Offset to be used for foreignObjects.

default

0

fontMetricsPadding

fontMetricsPadding: number

Padding to be added for text that is not wrapped to account for differences in font metrics on different platforms in pixels.

default

10.

gradients

gradients: Element[]

Local cache of gradients for quick lookups.

imageOffset

imageOffset: number

Offset to be used for image elements.

default

0

lastX

lastX: number

Holds the last x coordinate.

default

0

lastY

lastY: number

Holds the last y coordinate.

default

0

lineHeightCorrection

lineHeightCorrection: number

Correction factor for mxConstants.LINE_HEIGHT in HTML output.

default

1

lineOp

lineOp: string

Contains the string used for moving in paths.

default

'L'

matchHtmlAlignment

matchHtmlAlignment: boolean

Specifies if plain text output should match the vertical HTML alignment.

default

true.

minStrokeWidth

minStrokeWidth: number

Minimum stroke width for output.

default

1

moveOp

moveOp: string

Contains the string used for moving in paths.

default

'M'

node

node: Element

Holds the current DOM node.

path

path: string[]

Holds the current path as an array.

pointerEvents

pointerEvents: boolean

Boolean value that specifies if events should be handled.

default

false

pointerEventsValue

pointerEventsValue: string

Default value for active pointer events.

default

all

quadOp

quadOp: string

Contains the string used for quadratic paths.

default

'Q'

refCount

refCount: number

Local counter for references in SVG export.

default

0

root

root: Element

Reference to the container for the SVG content.

rotateHtml

rotateHtml: boolean

Switch for rotation of HTML.

default

true

state

state: mxCanvas2DState

Holds the current state.

states

states: mxCanvas2DState[]

Stack of states.

strokeTolerance

strokeTolerance: number

Adds transparent paths for strokes.

default

0

styleEnabled

styleEnabled: boolean

Stores the value of styleEnabled passed to the constructor.

default

false

textEnabled

textEnabled: boolean

Specifies if text output should be enabled.

default

true

textOffset

textOffset: number

Offset to be used for text elements.

default

0

Methods

addForeignObject

  • addForeignObject(x: number, y: number, w: number, h: number, align: string, valign: string, wrap: string, format: string, overflow: string, clip: string, rotation: number, dir: any, div: Element, root: Element): void

  • Creates a foreignObject for the given string and adds it to the given root.

    since

    mxgraph 4.1.0

    Parameters

    • x: number
    • y: number
    • w: number
    • h: number
    • align: string
    • valign: string
    • wrap: string
    • format: string
    • overflow: string
    • clip: string
    • rotation: number
    • dir: any
    • div: Element
    • root: Element

    Returns void

addNode

  • addNode(filled: boolean, stroked: boolean): void

  • Private helper function to create SVG elements

    Parameters

    • filled: boolean
    • stroked: boolean

    Returns void

addOp

  • addOp(): void

addTextBackground

  • addTextBackground(node: Element, str: string, x: number, y: number, w: number, h: number, align: string, valign: string, overflow: string): void

  • Background color and border

    Parameters

    • node: Element
    • str: string
    • x: number
    • y: number
    • w: number
    • h: number
    • align: string
    • valign: string
    • overflow: string

    Returns void

arcTo

  • arcTo(rx: number, ry: number, angle: number, largeArcFlag: number, sweepFlag: number, x: number, y: number): void

  • Adds the given arc to the current path. This is a synthetic operation that is broken down into curves.

    Parameters

    • rx: number
    • ry: number
    • angle: number
    • largeArcFlag: number
    • sweepFlag: number
    • x: number
    • y: number

    Returns void

begin

  • begin(): void

close

  • close(): void

  • Closes the current path.

    Note: the mxGraph JS code declares arguments (x1: number, y1: number, x2: number, y2: number, x3: number, y3: number) which are not used in the abstract implementation. The mxXmlCanvas2D JS implementation overrides this method without arguments. Decision is then taken to remove them here.

    Returns void

convertHtml

  • convertHtml(val: string): string

createAlternateContent

  • createAlternateContent(fo: Element, x: number, y: number, w: number, h: number, str: string, align: string, valign: string, wrap: string, format: string, overflow: string, clip: string, rotation: number): Element

  • Returns the alternate content for the given foreignObject.

    Parameters

    • fo: Element
    • x: number
    • y: number
    • w: number
    • h: number
    • str: string
    • align: string
    • valign: string
    • wrap: string
    • format: string
    • overflow: string
    • clip: string
    • rotation: number

    Returns Element

createClip

  • createClip(x: number, y: number, w: number, h: number): Element

  • Creates a clip for the given coordinates.

    Parameters

    • x: number
    • y: number
    • w: number
    • h: number

    Returns Element

createCss

  • createCss(w: number, h: number, align: string, valign: string, wrap: string, overflow: string, clip: string, bg: string, border: string | number, flex: string, block: any, s: any, callback: Function): void

  • Updates existing DOM nodes for text rendering.

    since

    mxgraph 4.1.0

    Parameters

    • w: number
    • h: number
    • align: string
    • valign: string
    • wrap: string
    • overflow: string
    • clip: string
    • bg: string
    • border: string | number
    • flex: string
    • block: any
    • s: any
    • callback: Function

    Returns void

createDashPattern

  • createDashPattern(scale: number): string

createDiv

  • createDiv(str: string): HTMLElement

  • Private helper function to create SVG elements Note: signature changed in mxgraph 4.1.0

    Parameters

    • str: string

    Returns HTMLElement

createElement

  • createElement(tagName: string, namespace?: string): HTMLElement

  • Private helper function to create SVG elements

    Parameters

    • tagName: string
    • Optional namespace: string

    Returns HTMLElement

createGradientId

  • createGradientId(start: string, end: string, alpha1: string, alpha2: string, direction: string): string

  • Private helper function to create SVG elements

    Parameters

    • start: string
    • end: string
    • alpha1: string
    • alpha2: string
    • direction: string

    Returns string

createShadow

  • createShadow(node: Element): Element

createState

createStyle

  • createStyle(x?: any): HTMLElement

createSvgGradient

  • createSvgGradient(start: string, end: string, alpha1: string, alpha2: string, direction: string): Element

  • Creates the given SVG gradient.

    Parameters

    • start: string
    • end: string
    • alpha1: string
    • alpha2: string
    • direction: string

    Returns Element

createTolerance

  • createTolerance(node: Element): Element

  • Creates a hit detection tolerance shape for the given node.

    Parameters

    • node: Element

    Returns Element

createUrlConverter

curveTo

  • curveTo(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number): void

ellipse

  • ellipse(x: number, y: number, w: number, h: number): void

end

  • end(): void

fill

  • fill(): void

fillAndStroke

  • fillAndStroke(): void

format

  • format(value: string): number

getAlternateText

  • getAlternateText(fo: Element, x: number, y: number, w: number, h: number, str: string, align: string, valign: string, wrap: string, format: string, overflow: string, clip: string, rotation: number): string

  • Returns the alternate text string for the given foreignObject.

    since

    mxgraph 4.1.0

    Parameters

    • fo: Element
    • x: number
    • y: number
    • w: number
    • h: number
    • str: string
    • align: string
    • valign: string
    • wrap: string
    • format: string
    • overflow: string
    • clip: string
    • rotation: number

    Returns string

getBaseUrl

  • getBaseUrl(): string

  • Returns the URL of the page without the hash part. This needs to use href to include any search part with no params (ie question mark alone). This is a workaround for the fact that window.location.search is empty if there is no search string behind the question mark.

    Returns string

getCurrentStrokeWidth

  • getCurrentStrokeWidth(): number

  • Returns the current stroke width (>= 1), ie. max(1, this.format(this.state.strokeWidth * this.state.scale)).

    Returns number

getSvgGradient

  • getSvgGradient(start: string, end: string, alpha1: string, alpha2: string, direction: string): string

  • Private helper function to create SVG elements

    Parameters

    • start: string
    • end: string
    • alpha1: string
    • alpha2: string
    • direction: string

    Returns string

getTextCss

  • getTextCss(): string

image

  • image(x: number, y: number, w: number, h: number, src: string, aspect: boolean, flipH: boolean, flipV: boolean): void

lineTo

  • lineTo(x: number, y: number): void

moveTo

  • moveTo(x: number, y: number): void

plainText

  • plainText(x: number, y: number, w: number, h: number, str: string, align: string, valign: string, wrap: string, overflow: string, clip: string, rotation: number, dir: string): void

  • Paints the given text. Possible values for format are empty string for plain text and html for HTML markup.

    Parameters

    • x: number
    • y: number
    • w: number
    • h: number
    • str: string
    • align: string
    • valign: string
    • wrap: string
    • overflow: string
    • clip: string
    • rotation: number
    • dir: string

    Returns void

quadTo

  • quadTo(x1: number, y1: number, x2: number, y2: number): void

rect

  • rect(x: number, y: number, w: number, h: number): void

reset

  • reset(): void

restore

  • restore(): void

rotate

  • rotate(theta: number, flipH: boolean, flipV: boolean, cx: number, cy: number): void

rotatePoint

  • rotatePoint(x: number, y: number, theta: number, cx: number, cy: number): void

roundrect

  • roundrect(x: number, y: number, w: number, h: number, dx: number, dy: number): void

save

  • save(): void

scale

  • scale(value: number): void

setAlpha

  • setAlpha(value: number): void

setDashPattern

  • setDashPattern(value: string): void

setDashed

  • setDashed(value: boolean, fixDash: boolean): void

setFillAlpha

  • setFillAlpha(value: number): void

setFillColor

  • setFillColor(value: string): void

setFontBackgroundColor

  • setFontBackgroundColor(value: string): void

setFontBorderColor

  • setFontBorderColor(value: string): void

setFontColor

  • setFontColor(value: string): void

setFontFamily

  • setFontFamily(value: string): void

setFontSize

  • setFontSize(value: number): void

setFontStyle

  • setFontStyle(value: string): void

setGradient

  • setGradient(color1: string, color2: string, x: number, y: number, w: number, h: number, direction: string, alpha1: number, alpha2: number): void

setLineCap

  • setLineCap(value: string): void

setLineJoin

  • setLineJoin(value: string): void

setLink

  • setLink(link: string): void

setMiterLimit

  • setMiterLimit(value: number): void

setShadow

  • setShadow(enabled: boolean): void

setShadowAlpha

  • setShadowAlpha(value: number): void

setShadowColor

  • setShadowColor(value: string): void

setShadowOffset

  • setShadowOffset(dx: number, dy: number): void

setStrokeAlpha

  • setStrokeAlpha(value: number): void

setStrokeColor

  • setStrokeColor(value: string): void

setStrokeWidth

  • setStrokeWidth(value: number): void

stroke

  • stroke(): void

text

  • text(x: number, y: number, w: number, h: number, str: string, align: string, valign: string, wrap: string, format: string, overflow: string, clip: string, rotation: number, dir: string): void

  • Paints the given text. Possible values for format are empty string for plain text and html for HTML markup. Note that HTML markup is only supported if foreignObject is supported and is true. (This means IE9 and later does currently not support HTML text as part of shapes.)

    Parameters

    • x: number
    • y: number
    • w: number
    • h: number
    • str: string
    • align: string
    • valign: string
    • wrap: string
    • format: string
    • overflow: string
    • clip: string
    • rotation: number
    • dir: string

    Returns void

translate

  • translate(dx: number, dy: number): void

updateFill

  • updateFill(): void

updateFont

  • updateFont(node: Element): void

  • Updates the text properties for the given node. (NOTE: For this to work in IE, the given node must be a text or tspan element.)

    Parameters

    • node: Element

    Returns void

updateStroke

  • updateStroke(): void

updateStrokeAttributes

  • updateStrokeAttributes(): void

updateText

  • updateText(x: number, y: number, w: number, h: number, align: string, valign: string, wrap: string, overflow: string, clip: string, rotation: number, node: Element): void

  • Updates existing DOM nodes for text rendering. LATER: Merge common parts with text function below.

    Parameters

    • x: number
    • y: number
    • w: number
    • h: number
    • align: string
    • valign: string
    • wrap: string
    • overflow: string
    • clip: string
    • rotation: number
    • node: Element

    Returns void

updateTextNodes

  • updateTextNodes(x: number, y: number, w: number, h: number, align: string, valign: string, wrap: string, overflow: string, clip: string, rotation: number, g: Element): void

  • Updates existing DOM nodes for text rendering.

    Parameters

    • x: number
    • y: number
    • w: number
    • h: number
    • align: string
    • valign: string
    • wrap: string
    • overflow: string
    • clip: string
    • rotation: number
    • g: Element

    Returns void

Generated using TypeDoc