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

mxSvgCanvas2D	Extends mxAbstractCanvas2D to implement a canvas for SVG.
Functions
mxSvgCanvas2D	Constructs a new SVG canvas.
Variables
root	Reference to the container for the SVG content.
gradients	Local cache of gradients for quick lookups.
defs	Reference to the defs section of the SVG document.
styleEnabled	Stores the value of styleEnabled passed to the constructor.
path	Holds the current DOM node.
matchHtmlAlignment	Specifies if plain text output should match the vertical HTML alignment.
textEnabled	Specifies if text output should be enabled.
foEnabled	Specifies if use of foreignObject for HTML markup is allowed.
foAltText	Specifies the fallback text for unsupported foreignObjects in exported documents.
foOffset	Offset to be used for foreignObjects.
textOffset	Offset to be used for text elements.
imageOffset	Offset to be used for image elements.
strokeTolerance	Adds transparent paths for strokes.
minStrokeWidth	Minimum stroke width for output.
refCount	Local counter for references in SVG export.
lineHeightCorrection	Correction factor for mxConstants.LINE_HEIGHT in HTML output.
pointerEventsValue	Default value for active pointer events.
fontMetricsPadding	Padding to be added for text that is not wrapped to account for differences in font metrics on different platforms in pixels.
cacheOffsetSize	Specifies if offsetWidth and offsetHeight should be cached.
Functions
format	Rounds all numbers to 2 decimal points.
getBaseUrl	Returns the URL of the page without the hash part.
reset	Returns any offsets for rendering pixels.
createStyle	Creates the optional style section.
createElement	Private helper function to create SVG elements
getAlternateText	Returns the alternate text string for the given foreignObject.
getAlternateContent	Returns the alternate content for the given foreignObject.
createGradientId	Private helper function to create SVG elements
getSvgGradient	Private helper function to create SVG elements
createSvgGradient	Creates the given SVG gradient.
addNode	Private helper function to create SVG elements
updateFill	Transfers the stroke attributes from <state> to <node>.
getCurrentStrokeWidth	Returns the current stroke width (>= 1), ie.
updateStroke	Transfers the stroke attributes from <state> to <node>.
updateStrokeAttributes	Transfers the stroke attributes from <state> to <node>.
createDashPattern	Creates the SVG dash pattern for the given state.
createTolerance	Creates a hit detection tolerance shape for the given node.
createShadow	Creates a shadow for the given node.
setLink	Experimental implementation for hyperlinks.
rotate	Sets the rotation of the canvas.
begin	Extends superclass to create path.
rect	Private helper function to create SVG elements
roundrect	Private helper function to create SVG elements
ellipse	Private helper function to create SVG elements
image	Private helper function to create SVG elements
convertHtml	Converts the given HTML string to XHTML.
createDiv	Private helper function to create SVG elements
addForeignObject	Creates a foreignObject for the given string and adds it to the given root.
getTextCss	Private helper function to create SVG elements
text	Paints the given text.
createClip	Creates a clip for the given coordinates.
plainText	Paints the given text.
updateFont	Updates the text properties for the given node.
addTextBackground	Background color and border
stroke	Paints the outline of the current path.
fill	Fills the current path.
fillAndStroke	Fills and paints the outline of the current path.

Functions

mxSvgCanvas2D

function mxSvgCanvas2D( root,
styleEnabled )

Constructs a new SVG canvas.

Parameters

root	SVG container for the output.
styleEnabled	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.

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.