SVG Vector Graphics

We can create a line by instantiating an Mx.MxDbSVG() object.

Click on Mx.MxDbSVG API (opens new window) to see detailed property and method descriptions.

import Mx from "mxdraw"

// Instantiate the point object
const getPoint = new Mx.MrxDbgUiPrPoint();

// First click of mouse
getPoint.go((status) => {
    if (status != 0) {
        return
    }

    // current mouse position
    const pt1 = getPoint.value()
    // Instantiate rectangle object rect
    const svg = new Mx.MxDbSVG();

    // set the point position
    svg.setSvgPostion(pt1);

    // set the SVG path
    svg.setSvgPath("/svg/target.svg");

    // Set the size of the SVG
    svg.setSvgSize(new THREE.Vector2(20000, 30000))


    // Set the adjustment ratio
    svg.setSvgAlignmentRatio(new THREE.Vector2(0, 0))
    

    // set color
    svg.setColor("#ff0000")

    // Get the control object and add the image object svg to the canvas
    Mx.MxFun.getCurrentDraw().addMxEntity(svg);
    
})

Note:

• Graphical objects can only be added to the canvas after the control object has been created! How to create a control object? Quick Start

• View the complete source code of this example: github (opens new window) | gitee (opens new window)

Result:

• Click on the canvas to display the SVG vector image.