@maxgraph/core
    Preparing search index...

    Class SvgCanvas2D

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

    const svgDoc = mxUtils.createXmlDocument();
    const root = (svgDoc.createElementNS != null) ?
    		svgDoc.createElementNS(mxConstants.NS_SVG, 'svg') : svgDoc.createElement('svg');

    if (svgDoc.createElementNS == null) {
      root.setAttribute('xmlns', constants.NS_SVG);
      root.setAttribute('xmlns:xlink', constants.NS_XLINK);
    } else {
      root.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', constants.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 Summary)

    Index

    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

    Properties

    cacheOffsetSize: boolean = true

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

    true
    closeOp: string = 'Z'

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

    converter: UrlConverter

    Holds the to convert image URLs.

    curveOp: string = 'C'

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

    defs: null | SVGDefsElement = null
    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.

    [Object]
    foEnabled: boolean = true

    Specifies if use of foreignObject for HTML markup is allowed.

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

    10.
    foOffset: number = 0

    Offset to be used for foreignObjects.

    0
    gradients: GradientMap
    imageOffset: number = 0

    Offset to be used for image elements.

    0
    lastX: number = 0

    Holds the last x coordinate.

    lastY: number = 0

    Holds the last y coordinate.

    lineHeightCorrection: number = 1

    Correction factor for mxConstants.LINE_HEIGHT in HTML output.

    1
    lineOp: string = 'L'

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

    matchHtmlAlignment: boolean = true

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

    true.
    minStrokeWidth: number = 1

    Minimum stroke width for output.

    1
    moveOp: string = 'M'

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

    node: null | SVGElement = null

    Holds the current DOM node.

    originalRoot: null | SVGElement = null
    path: (string | number)[] = []

    Holds the current path as an array.

    pointerEvents: boolean = false

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

    pointerEventsValue: string = 'all'

    Default value for active pointer events.

    all
    quadOp: string = 'Q'

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

    refCount: number = 0

    Local counter for references in SVG export.

    0
    root: null | SVGElement
    rotateHtml: boolean = true

    Switch for rotation of HTML. Default is false.

    state: CanvasState = ...

    Holds the current state.

    states: CanvasState[] = []

    Stack of states.

    strokeTolerance: number = 0

    Adds transparent paths for strokes.

    0
    styleEnabled: boolean = true
    textEnabled: boolean = true

    Specifies if text output should be enabled.

    true
    textOffset: number = 0

    Offset to be used for text elements.

    0

    Methods

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

      Parameters

      Returns void

    • Private helper function to create SVG elements

      Parameters

      • filled: boolean
      • stroked: boolean

      Returns 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

    • Closes the current path.

      Parameters

      • Optionalx1: number
      • Optionaly1: number
      • Optionalx2: number
      • Optionaly2: number
      • Optionalx3: number
      • Optionaly3: number

      Returns void

    • 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

    • Creates a clip for the given coordinates.

      Parameters

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

      Returns SVGElement

    • Creates the SVG dash pattern for the given state.

      Parameters

      • scale: number

      Returns string

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

      Parameters

      • str: string | HTMLElement

      Returns HTMLElement

    • Private helper function to create SVG elements

      Parameters

      • tagName: string
      • Optionalnamespace: string

      Returns SVGElement

    • Private helper function to create SVG elements

      Parameters

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

      Returns string

    • Creates a shadow for the given node.

      Parameters

      • node: SVGElement

      Returns SVGElement

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

      Parameters

      • node: SVGElement

      Returns SVGElement

    • Adds a bezier curve to the current path.

      Parameters

      • x1: number
      • y1: number
      • x2: number
      • y2: number
      • x3: number
      • y3: number

      Returns void

    • 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

    • 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

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

      Returns number

    • Private helper function to create SVG elements

      Parameters

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

      Returns null | string

    • 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

    • 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

    • Private helper function to create SVG elements

      Parameters

      • x: number
      • y: number
      • w: number
      • h: number
      • dx: number
      • dy: number

      Returns void

    • Sets the current gradient.

      Parameters

      • color1: string
      • color2: string
      • x: number
      • y: number
      • w: number
      • h: number
      • direction: DirectionValue
      • alpha1: number = 1
      • alpha2: number = 1

      Returns void

    • Sets the current shadow offset.

      Parameters

      • dx: number

        Number that represents the horizontal offset of the shadow.

      • dy: number

        Number that represents the vertical offset of the shadow.

      Returns void

    text

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

    • 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

    • Updates existing DOM nodes for text rendering.

      Parameters

      Returns 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

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Methods
    addForeignObjectaddNodeaddOpaddTextBackgroundarcTobegincloseconvertHtmlcreateAlternateContentcreateClipcreateDashPatterncreateDivcreateElementcreateGradientIdcreateShadowcreateStatecreateStylecreateSvgGradientcreateTolerancecreateUrlConvertercurveToellipseendfillfillAndStrokeformatgetAlternateTextgetBaseUrlgetCurrentStrokeWidthgetSvgGradientgetTextCssimagelineTomoveToplainTextquadTorectresetrestorerotaterotatePointroundrectsavescalesetAlphasetDashedsetDashPatternsetFillAlphasetFillColorsetFontBackgroundColorsetFontBorderColorsetFontColorsetFontFamilysetFontSizesetFontStylesetGradientsetLineCapsetLineJoinsetLinksetMiterLimitsetShadowsetShadowAlphasetShadowColorsetShadowOffsetsetStrokeAlphasetStrokeColorsetStrokeWidthstroketexttranslateupdateFillupdateFontupdateStrokeupdateStrokeAttributesupdateTextupdateTextNodescreateCss