mxSvgCanvas2D

Implements a canvas to be used with mxImageExport.  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);
}

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);
Summary
mxSvgCanvas2DImplements a canvas to be used with mxImageExport.
Functions
mxSvgCanvas2DConstructs an SVG canvas.
Variables
converterHolds the mxUrlConverter to convert image URLs.
autoAntiAliasSpecifies if anti aliasing should be disabled for rectangles and orthogonal paths.
textEnabledSpecifies if text output should be enabled.
foEnabledSpecifies if use of foreignObject for HTML markup is allowed.
Functions
getConverterReturns converter.
isAutoAntiAliasReturns autoAntiAlias.
setAutoAntiAliasSets autoAntiAlias.
isTextEnabledReturns textEnabled.
setTextEnabledSets textEnabled.
isFoEnabledReturns foEnabled.
setFoEnabledSets foEnabled.
saveSaves the state of the graphics object.
restoreRestores the state of the graphics object.
scaleScales the current graphics object.
translateTranslates the current graphics object.
rotateRotates and/or flips the current graphics object.
setStrokeWidthSets the stroke width.
setStrokeColorSets the stroke color.
setDashedSets the dashed state to true or false.
setDashPatternSets the dashed pattern to the given space separated list of numbers.
setLineCapSets the linecap.
setLineJoinSets the linejoin.
setMiterLimitSets the miterlimit.
setFontSizeSets the fontsize.
setFontColorSets the fontcolor.
setFontFamilySets the fontfamily.
setFontStyleSets the fontstyle.
setAlphaSets the current alpha.
setFillColorSets the fillcolor.
setGradientSets the gradient color.
setGlassGradientSets the glass gradient.
rectSets the current path to a rectangle.
roundrectSets the current path to a rounded rectangle.
ellipseSets the current path to an ellipse.
imagePaints an image.
textPaints the given text.
beginStarts a new path.
moveToMoves the current path the given coordinates.
lineToAdds a line to the current path.
quadToAdds a quadratic curve to the current path.
curveToAdds a bezier curve to the current path.
closeCloses the current path.
strokePaints the outline of the current path.
fillFills the current path.
fillstrokeFills and paints the outline of the current path.
shadowPaints the current path as a shadow of the given color.
clipUses the current path for clipping.

Functions

mxSvgCanvas2D

var mxSvgCanvas2D = function(root,
styleEnabled)

Constructs an 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

converter

var converter

Holds the mxUrlConverter to convert image URLs.

autoAntiAlias

var autoAntiAlias

Specifies if anti aliasing should be disabled for rectangles and orthogonal paths.  Default is true.

textEnabled

var textEnabled

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

foEnabled

var foEnabled

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

Functions

getConverter

getConverter: function()

Returns converter.

isAutoAntiAlias

isAutoAntiAlias: function()

Returns autoAntiAlias.

setAutoAntiAlias

setAutoAntiAlias: function(value)

Sets autoAntiAlias.

isTextEnabled

isTextEnabled: function()

Returns textEnabled.

setTextEnabled

setTextEnabled: function(value)

Sets textEnabled.

isFoEnabled

isFoEnabled: function()

Returns foEnabled.

setFoEnabled

setFoEnabled: function(value)

Sets foEnabled.

save

save: function()

Saves the state of the graphics object.

restore

restore: function()

Restores the state of the graphics object.

scale

scale: function(value)

Scales the current graphics object.

translate

translate: function(dx,
dy)

Translates the current graphics object.

rotate

rotate: function(theta,
flipH,
flipV,
cx,
cy)

Rotates and/or flips the current graphics object.

setStrokeWidth

setStrokeWidth: function(value)

Sets the stroke width.

setStrokeColor

setStrokeColor: function(value)

Sets the stroke color.

setDashed

setDashed: function(value)

Sets the dashed state to true or false.

setDashPattern

setDashPattern: function(value)

Sets the dashed pattern to the given space separated list of numbers.

setLineCap

setLineCap: function(value)

Sets the linecap.

setLineJoin

setLineJoin: function(value)

Sets the linejoin.

setMiterLimit

setMiterLimit: function(value)

Sets the miterlimit.

setFontSize

setFontSize: function(value)

Sets the fontsize.

setFontColor

setFontColor: function(value)

Sets the fontcolor.

setFontFamily

setFontFamily: function(value)

Sets the fontfamily.

setFontStyle

setFontStyle: function(value)

Sets the fontstyle.

setAlpha

setAlpha: function(alpha)

Sets the current alpha.

setFillColor

setFillColor: function(value)

Sets the fillcolor.

setGradient

setGradient: function(color1,
color2,
x,
y,
w,
h,
direction)

Sets the gradient color.

setGlassGradient

setGlassGradient: function(x,
y,
w,
h)

Sets the glass gradient.

rect

rect: function(x,
y,
w,
h)

Sets the current path to a rectangle.

roundrect

roundrect: function(x,
y,
w,
h,
dx,
dy)

Sets the current path to a rounded rectangle.

ellipse

ellipse: function(x,
y,
w,
h)

Sets the current path to an ellipse.

image

image: function(x,
y,
w,
h,
src,
aspect,
flipH,
flipV)

Paints an image.

text

text: function(x,
y,
w,
h,
str,
align,
valign,
vertical,
wrap,
format)

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

begin

begin: function()

Starts a new path.

moveTo

moveTo: function(x,
y)

Moves the current path the given coordinates.

lineTo

lineTo: function(x,
y)

Adds a line to the current path.

quadTo

quadTo: function(x1,
y1,
x2,
y2)

Adds a quadratic curve to the current path.

curveTo

curveTo: function(x1,
y1,
x2,
y2,
x3,
y3)

Adds a bezier curve to the current path.

close

close: function()

Closes the current path.

stroke

stroke: function()

Paints the outline of the current path.

fill

fill: function()

Fills the current path.

fillstroke

Fills and paints the outline of the current path.

shadow

shadow: function(value,
filled)

Paints the current path as a shadow of the given color.

clip

clip: function()

Uses the current path for clipping.

Creates a new image export instance to be used with an export canvas.
var mxSvgCanvas2D = function(root,
styleEnabled)
Constructs an SVG canvas.
var converter
Holds the mxUrlConverter to convert image URLs.
Converts relative and absolute URLs to absolute URLs with protocol and domain.
var autoAntiAlias
Specifies if anti aliasing should be disabled for rectangles and orthogonal paths.
var textEnabled
Specifies if text output should be enabled.
var foEnabled
Specifies if use of foreignObject for HTML markup is allowed.
getConverter: function()
Returns converter.
isAutoAntiAlias: function()
Returns autoAntiAlias.
setAutoAntiAlias: function(value)
Sets autoAntiAlias.
isTextEnabled: function()
Returns textEnabled.
setTextEnabled: function(value)
Sets textEnabled.
isFoEnabled: function()
Returns foEnabled.
setFoEnabled: function(value)
Sets foEnabled.
save: function()
Saves the state of the graphics object.
restore: function()
Restores the state of the graphics object.
scale: function(value)
Scales the current graphics object.
translate: function(dx,
dy)
Translates the current graphics object.
rotate: function(theta,
flipH,
flipV,
cx,
cy)
Rotates and/or flips the current graphics object.
setStrokeWidth: function(value)
Sets the stroke width.
setStrokeColor: function(value)
Sets the stroke color.
setDashed: function(value)
Sets the dashed state to true or false.
setDashPattern: function(value)
Sets the dashed pattern to the given space separated list of numbers.
setLineCap: function(value)
Sets the linecap.
setLineJoin: function(value)
Sets the linejoin.
setMiterLimit: function(value)
Sets the miterlimit.
setFontSize: function(value)
Sets the fontsize.
setFontColor: function(value)
Sets the fontcolor.
setFontFamily: function(value)
Sets the fontfamily.
setFontStyle: function(value)
Sets the fontstyle.
setAlpha: function(alpha)
Sets the current alpha.
setFillColor: function(value)
Sets the fillcolor.
setGradient: function(color1,
color2,
x,
y,
w,
h,
direction)
Sets the gradient color.
setGlassGradient: function(x,
y,
w,
h)
Sets the glass gradient.
rect: function(x,
y,
w,
h)
Sets the current path to a rectangle.
roundrect: function(x,
y,
w,
h,
dx,
dy)
Sets the current path to a rounded rectangle.
ellipse: function(x,
y,
w,
h)
Sets the current path to an ellipse.
image: function(x,
y,
w,
h,
src,
aspect,
flipH,
flipV)
Paints an image.
text: function(x,
y,
w,
h,
str,
align,
valign,
vertical,
wrap,
format)
Paints the given text.
begin: function()
Starts a new path.
moveTo: function(x,
y)
Moves the current path the given coordinates.
lineTo: function(x,
y)
Adds a line to the current path.
quadTo: function(x1,
y1,
x2,
y2)
Adds a quadratic curve to the current path.
curveTo: function(x1,
y1,
x2,
y2,
x3,
y3)
Adds a bezier curve to the current path.
close: function()
Closes the current path.
stroke: function()
Paints the outline of the current path.
fill: function()
Fills the current path.
shadow: function(value,
filled)
Paints the current path as a shadow of the given color.
clip: function()
Uses the current path for clipping.
Close