mxSvgCanvas2D

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

Open issues

Opacity for transformed foreignObjects in Chrome.
Gradient IDs must be refactored for fragments.

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

var bounds = graph.getGraphBounds();
root.setAttribute('width', (bounds.x + bounds.width + 4) + 'px');
root.setAttribute('height', (bounds.y + bounds.height + 4) + 'px');
root.setAttribute('xmlns:xlink', mxConstants.NS_XLINK);
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.
strokeTolerance	Adds transparent paths for strokes.
refCount	Local counter for references in SVG export.
blockImagePointerEvents	Specifies if a transparent rectangle should be added on top of images to absorb all pointer events.
Functions
reset	Returns any offsets for rendering pixels.
createStyle	Creates the optional style section.
createElement	Private helper function to create SVG elements
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>.
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.
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
createDiv	Private helper function to create SVG elements
text	Paints the given text.
createClip	Creates a clip for the given coordinates.
text	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.

strokeTolerance

mxSvgCanvas2D.prototype.strokeTolerance

Adds transparent paths for strokes.

refCount

mxSvgCanvas2D.prototype.refCount

Local counter for references in SVG export.

blockImagePointerEvents

mxSvgCanvas2D.prototype.blockImagePointerEvents

Specifies if a transparent rectangle should be added on top of images to absorb all pointer events. Default is false. This is only needed in Firefox to disable control-clicks on images.

Functions

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

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

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.

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

createDiv

mxSvgCanvas2D.prototype.createDiv = function( str,
align,
valign,
style,
overflow )

Private helper function to create SVG elements

text

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

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.

text

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.