mxSvgCanvas2D

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);

A description of the public API is available in mxXmlCanvas2D.

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.

Summary
mxSvgCanvas2DExtends mxAbstractCanvas2D to implement a canvas for SVG.
Functions
mxSvgCanvas2DConstructs a new SVG canvas.
Variables
rootReference to the container for the SVG content.
gradientsLocal cache of gradients for quick lookups.
defsReference to the defs section of the SVG document.
styleEnabledStores the value of styleEnabled passed to the constructor.
pathHolds the current DOM node.
matchHtmlAlignmentSpecifies if plain text output should match the vertical HTML alignment.
textEnabledSpecifies if text output should be enabled.
foEnabledSpecifies if use of foreignObject for HTML markup is allowed.
foAltTextSpecifies the fallback text for unsupported foreignObjects in exported documents.
foOffsetOffset to be used for foreignObjects.
textOffsetOffset to be used for text elements.
imageOffsetOffset to be used for image elements.
strokeToleranceAdds transparent paths for strokes.
minStrokeWidthMinimum stroke width for output.
refCountLocal counter for references in SVG export.
lineHeightCorrectionCorrection factor for mxConstants.LINE_HEIGHT in HTML output.
pointerEventsValueDefault value for active pointer events.
fontMetricsPaddingPadding to be added for text that is not wrapped to account for differences in font metrics on different platforms in pixels.
cacheOffsetSizeSpecifies if offsetWidth and offsetHeight should be cached.
Functions
formatRounds all numbers to 2 decimal points.
getBaseUrlReturns the URL of the page without the hash part.
resetReturns any offsets for rendering pixels.
createStyleCreates the optional style section.
createElementPrivate helper function to create SVG elements
getAlternateTextReturns the alternate text string for the given foreignObject.
getAlternateContentReturns the alternate content for the given foreignObject.
createGradientIdPrivate helper function to create SVG elements
getSvgGradientPrivate helper function to create SVG elements
createSvgGradientCreates the given SVG gradient.
addNodePrivate helper function to create SVG elements
updateFillTransfers the stroke attributes from <state> to <node>.
getCurrentStrokeWidthReturns the current stroke width (>= 1), ie.
updateStrokeTransfers the stroke attributes from <state> to <node>.
updateStrokeAttributesTransfers the stroke attributes from <state> to <node>.
createDashPatternCreates the SVG dash pattern for the given state.
createToleranceCreates a hit detection tolerance shape for the given node.
createShadowCreates a shadow for the given node.
setLinkExperimental implementation for hyperlinks.
rotateSets the rotation of the canvas.
beginExtends superclass to create path.
rectPrivate helper function to create SVG elements
roundrectPrivate helper function to create SVG elements
ellipsePrivate helper function to create SVG elements
imagePrivate helper function to create SVG elements
convertHtmlConverts the given HTML string to XHTML.
createDivPrivate helper function to create SVG elements
addForeignObjectCreates a foreignObject for the given string and adds it to the given root.
getTextCssPrivate helper function to create SVG elements
textPaints the given text.
createClipCreates a clip for the given coordinates.
plainTextPaints the given text.
updateFontUpdates the text properties for the given node.
addTextBackgroundBackground color and border
strokePaints the outline of the current path.
fillFills the current path.
fillAndStrokeFills and paints the outline of the current path.

Functions

mxSvgCanvas2D

function mxSvgCanvas2D(root,
styleEnabled)

Constructs a new SVG canvas.

Parameters

rootSVG container for the output.
styleEnabledOptional 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.

Variables

root

this.root

Reference to the container for the SVG content.

gradients

this.gradients

Local cache of gradients for quick lookups.

defs

this.defs

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

styleEnabled

this.styleEnabled

Stores the value of styleEnabled passed to the constructor.

path

Holds the current DOM node.

matchHtmlAlignment

mxSvgCanvas2D.prototype.matchHtmlAlignment

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

textEnabled

mxSvgCanvas2D.prototype.textEnabled

Specifies if text output should be enabled.  Default is true.

foEnabled

mxSvgCanvas2D.prototype.foEnabled

Specifies if use of foreignObject for HTML markup is allowed.  Default is true.

foAltText

mxSvgCanvas2D.prototype.foAltText

Specifies the fallback text for unsupported foreignObjects in exported documents.  Default is ‘[Object]’.  If this is set to null then no fallback text is added to the exported document.

foOffset

mxSvgCanvas2D.prototype.foOffset

Offset to be used for foreignObjects.

textOffset

mxSvgCanvas2D.prototype.textOffset

Offset to be used for text elements.

imageOffset

mxSvgCanvas2D.prototype.imageOffset

Offset to be used for image elements.

strokeTolerance

mxSvgCanvas2D.prototype.strokeTolerance

Adds transparent paths for strokes.

minStrokeWidth

mxSvgCanvas2D.prototype.minStrokeWidth

Minimum stroke width for output.

refCount

mxSvgCanvas2D.prototype.refCount

Local counter for references in SVG export.

lineHeightCorrection

mxSvgCanvas2D.prototype.lineHeightCorrection

Correction factor for mxConstants.LINE_HEIGHT in HTML output.  Default is 1.

pointerEventsValue

mxSvgCanvas2D.prototype.pointerEventsValue

Default value for active pointer events.  Default is all.

fontMetricsPadding

mxSvgCanvas2D.prototype.fontMetricsPadding

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

cacheOffsetSize

mxSvgCanvas2D.prototype.cacheOffsetSize

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

Functions

format

mxSvgCanvas2D.prototype.format = function(value)

Rounds all numbers to 2 decimal points.

getBaseUrl

mxSvgCanvas2D.prototype.getBaseUrl = function()

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.

reset

mxSvgCanvas2D.prototype.reset = function()

Returns any offsets for rendering pixels.

createStyle

mxSvgCanvas2D.prototype.createStyle = function(x)

Creates the optional style section.

createElement

mxSvgCanvas2D.prototype.createElement = function(tagName,
namespace)

Private helper function to create SVG elements

getAlternateText

mxSvgCanvas2D.prototype.getAlternateText = function(fo,
x,
y,
w,
h,
str,
align,
valign,
wrap,
format,
overflow,
clip,
rotation)

Returns the alternate text string for the given foreignObject.

getAlternateContent

Returns the alternate content for the given foreignObject.

createGradientId

mxSvgCanvas2D.prototype.createGradientId = function(start,
end,
alpha1,
alpha2,
direction)

Private helper function to create SVG elements

getSvgGradient

mxSvgCanvas2D.prototype.getSvgGradient = function(start,
end,
alpha1,
alpha2,
direction)

Private helper function to create SVG elements

createSvgGradient

mxSvgCanvas2D.prototype.createSvgGradient = function(start,
end,
alpha1,
alpha2,
direction)

Creates the given SVG gradient.

addNode

mxSvgCanvas2D.prototype.addNode = function(filled,
stroked)

Private helper function to create SVG elements

updateFill

mxSvgCanvas2D.prototype.updateFill = function()

Transfers the stroke attributes from <state> to <node>.

getCurrentStrokeWidth

mxSvgCanvas2D.prototype.getCurrentStrokeWidth = function()

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

updateStroke

mxSvgCanvas2D.prototype.updateStroke = function()

Transfers the stroke attributes from <state> to <node>.

updateStrokeAttributes

mxSvgCanvas2D.prototype.updateStrokeAttributes = function()

Transfers the stroke attributes from <state> to <node>.

createDashPattern

mxSvgCanvas2D.prototype.createDashPattern = function(scale)

Creates the SVG dash pattern for the given state.

createTolerance

mxSvgCanvas2D.prototype.createTolerance = function(node)

Creates a hit detection tolerance shape for the given node.

createShadow

mxSvgCanvas2D.prototype.createShadow = function(node)

Creates a shadow for the given node.

setLink

mxSvgCanvas2D.prototype.setLink = function(link)

Experimental implementation for hyperlinks.

rotate

mxSvgCanvas2D.prototype.rotate = function(theta,
flipH,
flipV,
cx,
cy)

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

begin

mxSvgCanvas2D.prototype.begin = function()

Extends superclass to create path.

rect

mxSvgCanvas2D.prototype.rect = function(x,
y,
w,
h)

Private helper function to create SVG elements

roundrect

mxSvgCanvas2D.prototype.roundrect = function(x,
y,
w,
h,
dx,
dy)

Private helper function to create SVG elements

ellipse

mxSvgCanvas2D.prototype.ellipse = function(x,
y,
w,
h)

Private helper function to create SVG elements

image

mxSvgCanvas2D.prototype.image = function(x,
y,
w,
h,
src,
aspect,
flipH,
flipV)

Private helper function to create SVG elements

convertHtml

mxSvgCanvas2D.prototype.convertHtml = function(val)

Converts the given HTML string to XHTML.

createDiv

mxSvgCanvas2D.prototype.createDiv = function(str)

Private helper function to create SVG elements

addForeignObject

mxSvgCanvas2D.prototype.addForeignObject = function(x,
y,
w,
h,
str,
align,
valign,
wrap,
format,
overflow,
clip,
rotation,
dir,
div,
root)

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

getTextCss

mxSvgCanvas2D.prototype.getTextCss = function()

Private helper function to create SVG elements

text

mxSvgCanvas2D.prototype.text = function(x,
y,
w,
h,
str,
align,
valign,
wrap,
format,
overflow,
clip,
rotation,
dir)

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 foEnabled is true.  (This means IE9 and later does currently not support HTML text as part of shapes.)

createClip

mxSvgCanvas2D.prototype.createClip = function(x,
y,
w,
h)

Creates a clip for the given coordinates.

plainText

mxSvgCanvas2D.prototype.plainText = function(x,
y,
w,
h,
str,
align,
valign,
wrap,
overflow,
clip,
rotation,
dir)

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

updateFont

mxSvgCanvas2D.prototype.updateFont = function(node)

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.)

addTextBackground

mxSvgCanvas2D.prototype.addTextBackground = function(node,
str,
x,
y,
w,
h,
align,
valign,
overflow)

Background color and border

stroke

mxSvgCanvas2D.prototype.stroke = function()

Paints the outline of the current path.

fill

mxSvgCanvas2D.prototype.fill = function()

Fills the current path.

fillAndStroke

mxSvgCanvas2D.prototype.fillAndStroke = function()

Fills and paints the outline of the current path.

Base class for all canvases.
function mxSvgCanvas2D(root,
styleEnabled)
Constructs a new SVG canvas.
this.root
Reference to the container for the SVG content.
this.gradients
Local cache of gradients for quick lookups.
this.defs
Reference to the defs section of the SVG document.
this.styleEnabled
Stores the value of styleEnabled passed to the constructor.
mxSvgCanvas2D.prototype.matchHtmlAlignment
Specifies if plain text output should match the vertical HTML alignment.
mxSvgCanvas2D.prototype.textEnabled
Specifies if text output should be enabled.
mxSvgCanvas2D.prototype.foEnabled
Specifies if use of foreignObject for HTML markup is allowed.
mxSvgCanvas2D.prototype.foAltText
Specifies the fallback text for unsupported foreignObjects in exported documents.
mxSvgCanvas2D.prototype.foOffset
Offset to be used for foreignObjects.
mxSvgCanvas2D.prototype.textOffset
Offset to be used for text elements.
mxSvgCanvas2D.prototype.imageOffset
Offset to be used for image elements.
mxSvgCanvas2D.prototype.strokeTolerance
Adds transparent paths for strokes.
mxSvgCanvas2D.prototype.minStrokeWidth
Minimum stroke width for output.
mxSvgCanvas2D.prototype.refCount
Local counter for references in SVG export.
mxSvgCanvas2D.prototype.lineHeightCorrection
Correction factor for mxConstants.LINE_HEIGHT in HTML output.
LINE_HEIGHT: 1.2
Defines the default line height for text labels.
mxSvgCanvas2D.prototype.pointerEventsValue
Default value for active pointer events.
mxSvgCanvas2D.prototype.fontMetricsPadding
Padding to be added for text that is not wrapped to account for differences in font metrics on different platforms in pixels.
mxSvgCanvas2D.prototype.cacheOffsetSize
Specifies if offsetWidth and offsetHeight should be cached.
mxSvgCanvas2D.prototype.format = function(value)
Rounds all numbers to 2 decimal points.
mxSvgCanvas2D.prototype.getBaseUrl = function()
Returns the URL of the page without the hash part.
mxSvgCanvas2D.prototype.reset = function()
Returns any offsets for rendering pixels.
mxSvgCanvas2D.prototype.createStyle = function(x)
Creates the optional style section.
mxSvgCanvas2D.prototype.createElement = function(tagName,
namespace)
Private helper function to create SVG elements
mxSvgCanvas2D.prototype.getAlternateText = function(fo,
x,
y,
w,
h,
str,
align,
valign,
wrap,
format,
overflow,
clip,
rotation)
Returns the alternate text string for the given foreignObject.
mxSvgCanvas2D.prototype.createGradientId = function(start,
end,
alpha1,
alpha2,
direction)
Private helper function to create SVG elements
mxSvgCanvas2D.prototype.getSvgGradient = function(start,
end,
alpha1,
alpha2,
direction)
Private helper function to create SVG elements
mxSvgCanvas2D.prototype.createSvgGradient = function(start,
end,
alpha1,
alpha2,
direction)
Creates the given SVG gradient.
mxSvgCanvas2D.prototype.addNode = function(filled,
stroked)
Private helper function to create SVG elements
mxSvgCanvas2D.prototype.updateFill = function()
Transfers the stroke attributes from state to node.
mxSvgCanvas2D.prototype.getCurrentStrokeWidth = function()
Returns the current stroke width (>= 1), ie.
mxSvgCanvas2D.prototype.updateStroke = function()
Transfers the stroke attributes from state to node.
mxSvgCanvas2D.prototype.updateStrokeAttributes = function()
Transfers the stroke attributes from state to node.
mxSvgCanvas2D.prototype.createDashPattern = function(scale)
Creates the SVG dash pattern for the given state.
mxSvgCanvas2D.prototype.createTolerance = function(node)
Creates a hit detection tolerance shape for the given node.
mxSvgCanvas2D.prototype.createShadow = function(node)
Creates a shadow for the given node.
mxSvgCanvas2D.prototype.setLink = function(link)
Experimental implementation for hyperlinks.
mxSvgCanvas2D.prototype.rotate = function(theta,
flipH,
flipV,
cx,
cy)
Sets the rotation of the canvas.
mxSvgCanvas2D.prototype.begin = function()
Extends superclass to create path.
mxSvgCanvas2D.prototype.rect = function(x,
y,
w,
h)
Private helper function to create SVG elements
mxSvgCanvas2D.prototype.roundrect = function(x,
y,
w,
h,
dx,
dy)
Private helper function to create SVG elements
mxSvgCanvas2D.prototype.ellipse = function(x,
y,
w,
h)
Private helper function to create SVG elements
mxSvgCanvas2D.prototype.image = function(x,
y,
w,
h,
src,
aspect,
flipH,
flipV)
Private helper function to create SVG elements
mxSvgCanvas2D.prototype.convertHtml = function(val)
Converts the given HTML string to XHTML.
mxSvgCanvas2D.prototype.createDiv = function(str)
Private helper function to create SVG elements
mxSvgCanvas2D.prototype.addForeignObject = function(x,
y,
w,
h,
str,
align,
valign,
wrap,
format,
overflow,
clip,
rotation,
dir,
div,
root)
Creates a foreignObject for the given string and adds it to the given root.
mxSvgCanvas2D.prototype.getTextCss = function()
Private helper function to create SVG elements
mxSvgCanvas2D.prototype.text = function(x,
y,
w,
h,
str,
align,
valign,
wrap,
format,
overflow,
clip,
rotation,
dir)
Paints the given text.
mxSvgCanvas2D.prototype.createClip = function(x,
y,
w,
h)
Creates a clip for the given coordinates.
mxSvgCanvas2D.prototype.plainText = function(x,
y,
w,
h,
str,
align,
valign,
wrap,
overflow,
clip,
rotation,
dir)
Paints the given text.
mxSvgCanvas2D.prototype.updateFont = function(node)
Updates the text properties for the given node.
mxSvgCanvas2D.prototype.addTextBackground = function(node,
str,
x,
y,
w,
h,
align,
valign,
overflow)
Background color and border
mxSvgCanvas2D.prototype.stroke = function()
Paints the outline of the current path.
mxSvgCanvas2D.prototype.fill = function()
Fills the current path.
mxSvgCanvas2D.prototype.fillAndStroke = function()
Fills and paints the outline of the current path.
Base class for all canvases.
Close