SVG Layer

SVG is a vector-based graphics rendering. I2Djs svgLayer exposes all native capabilities of SVG through its intuitive and easy to use APIs. Full scale DOM event types are supported along with some additional event behaviors like Drag, Zoom, etc.

Layer API:

i2d.svgLayer( #containerId, LayerSettings );

svgLayer API return rendering instance of SVG context. It accepts containerID as an input along with the SettingsObj object. Please refer to the SVGConfig object.

Example:

   var SVGLayer = i2d.svgLayer('#containerId', settingsObj = {});

• containerID - CSS ID selector which uniquely identifies the container in which the Canvas element will be rendered.

• SettingsObj - Object with below settings.

  • enableEvents - Boolean - Flag to enable/disable events for the rendered layer. Default is True

  • enableResize - Boolean - Flag to enable/disable window resize event. If it is disabled, the layer won't be resized on the container resize. Default is True.

  • autoUpdate - Boolean - To disable auto rendering of VDom changes to DOM. Used only in special cases to improve rendering performance. On disabling, one should invoke layerInstance.update() to manually render the changes to the DOM.

Layer specific Methods:

Layer.setLayerId( String ); - For setting ID attribute to the Layer Dom element.

Layer.setAttr( attr, value ); - To set attributes to the layer Dom Element.

Layer.setViewBox( x, y, width, height );

Layer.setStyle( prop, value ); - To set style properties to the layer Dom Element.

Layer.SetSize( width, height ); - Optional - To set the Size of the canvas layer. If not, the parent container size will be inherited by the layer.

Layer.update( ); - API to manually trigger the Layer update. In the case of the default behavior, all the changes from VDOM will be applied to the DOM as a part of the refresh cycle.

Layer.destroy( ); To remove layer instance. It removes the DOM element along with the vDOM.and Also unbinds all the event listeners is any.

Example:

var SVGLayer = i2d.svgLayer('#containerId', {});

let circle = SVGLayer.createEl({
    el: 'circle',
    attr: {
        r: 50,
        cx: renderer.width / 2,
        cy: renderer.height / 2
    },
    style: {
        fill: '#ff0000'
    }
})

let path = SVGLayer.createEl({
    el: 'path',
    attr: {
        d: "M150 0 L75 200 L225 200 Z"
    },
    style: {
        stroke: '#ff0000'
    }
})