Class SvgCanvas2D

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

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.

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

Or set the respective attribute in the SVG element directly.

Hierarchy (view full)

Constructors

constructor

Properties

cacheOffsetSize closeOp converter curveOp defs foAltText foEnabled fontMetricsPadding foOffset gradients imageOffset lastX lastY lineHeightCorrection lineOp matchHtmlAlignment minStrokeWidth moveOp node originalRoot path pointerEvents pointerEventsValue quadOp refCount root rotateHtml state states strokeTolerance styleEnabled textEnabled textOffset

Methods

addForeignObject addNode addOp addTextBackground arcTo begin close convertHtml createAlternateContent createClip createDashPattern createDiv createElement createGradientId createShadow createState createStyle createSvgGradient createTolerance createUrlConverter curveTo ellipse end fill fillAndStroke format getAlternateText getBaseUrl getCurrentStrokeWidth getSvgGradient getTextCss image lineTo moveTo plainText quadTo rect reset restore rotate rotatePoint roundrect save scale setAlpha setDashed setDashPattern setFillAlpha setFillColor setFontBackgroundColor setFontBorderColor setFontColor setFontFamily setFontSize setFontStyle setGradient setLineCap setLineJoin setLink setMiterLimit setShadow setShadowAlpha setShadowColor setShadowOffset setStrokeAlpha setStrokeColor setStrokeWidth stroke text translate updateFill updateFont updateStroke updateStrokeAttributes updateText updateTextNodes createCss

Constructors

constructor

Properties

cacheOffsetSize

cacheOffsetSize: boolean = true

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

Default

true

closeOp

closeOp: string = 'Z'

Holds the operator for closing curves. Default is 'Z'.

converter

converter: UrlConverter

Holds the to convert image URLs.

curveOp

curveOp: string = 'C'

Contains the string used for bezier curves. Default is 'C'.

defs

defs: null | SVGDefsElement = null

foAltText

foAltText: string = '[Object]'

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 = true

Specifies if use of foreignObject for HTML markup is allowed.

Default

true

fontMetricsPadding

fontMetricsPadding: number = 10

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

Default

10.

foOffset

foOffset: number = 0

Offset to be used for foreignObjects.

Default

0

gradients

gradients: GradientMap

imageOffset

imageOffset: number = 0

Offset to be used for image elements.

Default

0

lastX

lastX: number = 0

Holds the last x coordinate.

lastY

lastY: number = 0

Holds the last y coordinate.

lineHeightCorrection

lineHeightCorrection: number = 1

Correction factor for mxConstants.LINE_HEIGHT in HTML output.

Default

1

lineOp

lineOp: string = 'L'

Contains the string used for moving in paths. Default is 'L'.

matchHtmlAlignment

matchHtmlAlignment: boolean = true

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

Default

true.

minStrokeWidth

minStrokeWidth: number = 1

Minimum stroke width for output.

Default

1

moveOp

moveOp: string = 'M'

Contains the string used for moving in paths. Default is 'M'.

node

node: null | SVGElement = null

Holds the current DOM node.

originalRoot

originalRoot: null | SVGElement = null

path

path: (string | number)[] = []

Holds the current path as an array.

pointerEvents

pointerEvents: boolean = false

Boolean value that specifies if events should be handled. Default is false.

pointerEventsValue

pointerEventsValue: string = 'all'

Default value for active pointer events.

Default

all

quadOp

quadOp: string = 'Q'

Contains the string used for quadratic paths. Default is 'Q'.

refCount

refCount: number = 0

Local counter for references in SVG export.

Default

0

root

root: null | SVGElement

rotateHtml

rotateHtml: boolean = true

Switch for rotation of HTML. Default is false.

state

state: CanvasState = ...

Holds the current state.

states

states: CanvasState[] = []

Stack of states.

strokeTolerance

strokeTolerance: number = 0

Adds transparent paths for strokes.

Default

0

styleEnabled

styleEnabled: boolean = true

textEnabled

textEnabled: boolean = true

Specifies if text output should be enabled.

Default

true

textOffset

textOffset: number = 0

Offset to be used for text elements.

Default

0

Methods

addForeignObject

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

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

    Parameters

    Returns void

addNode

  • addNode(filled, stroked): void

  • Private helper function to create SVG elements

    Parameters

    • filled: boolean
    • stroked: boolean

    Returns void

addOp

addTextBackground

arcTo

  • arcTo(rx, ry, angle, largeArcFlag, sweepFlag, x, y): 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: boolean
    • sweepFlag: boolean
    • x: number
    • y: number

    Returns void

begin

close

convertHtml

createAlternateContent

  • createAlternateContent(fo, x, y, w, h, str, align, valign, wrap, format, overflow, clip, rotation): null | SVGElement

  • Returns the alternate content for the given foreignObject.

    Parameters

    • fo: SVGForeignObjectElement
    • x: number
    • y: number
    • w: number
    • h: number
    • str: string
    • align: AlignValue
    • valign: VAlignValue
    • wrap: boolean
    • format: string
    • overflow: OverflowValue
    • clip: boolean
    • rotation: number

    Returns null | SVGElement

createClip

  • createClip(x, y, w, h): SVGElement

  • Creates a clip for the given coordinates.

    Parameters

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

    Returns SVGElement

createDashPattern

  • createDashPattern(scale): string

  • Creates the SVG dash pattern for the given state.

    Parameters

    • scale: number

    Returns string

createDiv

  • createDiv(str): HTMLElement

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

    Parameters

    • str: string | HTMLElement

    Returns HTMLElement

createElement

  • createElement(tagName, namespace?): SVGElement

  • Private helper function to create SVG elements

    Parameters

    • tagName: string
    • Optionalnamespace: string

    Returns SVGElement

createGradientId

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

  • Private helper function to create SVG elements

    Parameters

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

    Returns string

createShadow

  • createShadow(node): SVGElement

  • Creates a shadow for the given node.

    Parameters

    • node: SVGElement

    Returns SVGElement

createState

createStyle

createSvgGradient

createTolerance

  • createTolerance(node): SVGElement

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

    Parameters

    • node: SVGElement

    Returns SVGElement

createUrlConverter

curveTo

ellipse

end

fill

fillAndStroke

format

getAlternateText

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

  • Returns the alternate text string for the given foreignObject.

    Parameters

    • fo: SVGForeignObjectElement
    • x: number
    • y: number
    • w: number
    • h: number
    • str: string | Element
    • align: AlignValue
    • valign: VAlignValue
    • wrap: boolean
    • format: string
    • overflow: OverflowValue
    • clip: boolean
    • rotation: number

    Returns null | 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, end, alpha1, alpha2, direction): null | string

  • Private helper function to create SVG elements

    Parameters

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

    Returns null | string

getTextCss

image

  • image(x, y, w, h, src, aspect?, flipH?, flipV?): void

  • Private helper function to create SVG elements

    Parameters

    • x: number
    • y: number
    • w: number
    • h: number
    • src: string
    • aspect: boolean = true
    • flipH: boolean = false
    • flipV: boolean = false

    Returns void

lineTo

moveTo

plainText

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

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

    Parameters

    Returns void

quadTo

rect

reset

restore

rotate

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

  • Sets the rotation of the canvas. Note that rotation cannot be concatenated.

    Parameters

    • theta: number
    • flipH: boolean
    • flipV: boolean
    • cx: number
    • cy: number

    Returns void

rotatePoint

roundrect

save

scale

setAlpha

setDashed

setDashPattern

setFillAlpha

setFillColor

setFontBackgroundColor

setFontBorderColor

setFontColor

setFontFamily

setFontSize

setFontStyle

setGradient

setLineCap

setLineJoin

setLink

setMiterLimit

setShadow

setShadowAlpha

setShadowColor

setShadowOffset

setStrokeAlpha

setStrokeColor

setStrokeWidth

stroke

text

  • text(x, y, w, h, str, align, valign, wrap, format, overflow, clip, rotation?, dir): 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

    Returns void

translate

updateFill

updateFont

  • updateFont(node): 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: SVGElement

    Returns void

updateStroke

updateStrokeAttributes

updateText

updateTextNodes

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

  • Updates existing DOM nodes for text rendering.

    Parameters

    Returns void

StaticcreateCss

  • createCss(w, h, align, valign, wrap, overflow, clip, bg, border, flex, block, scale, callback): void

  • Updates existing DOM nodes for text rendering.

    Parameters

    • w: number
    • h: number
    • align: AlignValue
    • valign: string
    • wrap: boolean
    • overflow: string
    • clip: boolean
    • bg: null | string
    • border: null | string
    • flex: string
    • block: string
    • scale: number
    • callback: ((dx: number, dy: number, flex: string, item: string, block: string, ofl: string) => void)
        • (dx, dy, flex, item, block, ofl): void

        • Parameters

          • dx: number
          • dy: number
          • flex: string
          • item: string
          • block: string
          • ofl: string

          Returns void

    Returns void

Settings

Member Visibility

On This Page

Constructors
Properties
Methods
addForeignObjectaddNodeaddOpaddTextBackgroundarcTobegincloseconvertHtmlcreateAlternateContentcreateClipcreateDashPatterncreateDivcreateElementcreateGradientIdcreateShadowcreateStatecreateStylecreateSvgGradientcreateTolerancecreateUrlConvertercurveToellipseendfillfillAndStrokeformatgetAlternateTextgetBaseUrlgetCurrentStrokeWidthgetSvgGradientgetTextCssimagelineTomoveToplainTextquadTorectresetrestorerotaterotatePointroundrectsavescalesetAlphasetDashedsetDashPatternsetFillAlphasetFillColorsetFontBackgroundColorsetFontBorderColorsetFontColorsetFontFamilysetFontSizesetFontStylesetGradientsetLineCapsetLineJoinsetLinksetMiterLimitsetShadowsetShadowAlphasetShadowColorsetShadowOffsetsetStrokeAlphasetStrokeColorsetStrokeWidthstroketexttranslateupdateFillupdateFontupdateStrokeupdateStrokeAttributesupdateTextupdateTextNodescreateCss