Function Reference

Initialization

inksvg(id)

Constructor. 'id' - SVG-tag ID. Example:

            
mysvg = new inksvg('#mysvg')

getOptions()

Return current options. Example:

            
var options = mysvg.getOptions()

setOptions(options)

Set options. Example:

            
var my_options = {
  'ZoomRange': [0.2, 20],
  'ZoomMouseEnable': true,
  'ZoomSlow': {'delay': 100, 'duration': 2500},
  'ZoomFast': {'delay': 0, 'duration': 500}
}

mysvg.setOptions(my_options)

Options format

        
options = {
'ZoomRange': [1.0, 10.0], // Minimal and maximal available scale
'ZoomMouseEnable': true,  // Enable/Disable zoom and dragging by mouse
'ZoomSlow': {'delay': 100, 'duration': 1500}, // Default options for slow zoom fly
'ZoomFast': {'delay': 0, 'duration': 200} //  Default options for fast zoom fly
}

on(callback)

Callback functions. Available events:

onload - after file loading complete
onadd - after file adding complete
onclick - after mouse click on object (in SVG-file)
onmouseover - mouse over the object (in SVG-file)
onmouseout - mouse out of object (in SVG-file)

Example:

          
function AfterLoad() {
...
}

function AfterAdd(id) {
  console.log(id)
}       

function OnClick() {
  console.log('Mouse click. id: ' + this.id)
}
       
function OnMouseOver() {
  console.log('Mouse OVER. id: '+ this.id)
}

function OnMouseOut() {
  console.log('Mouse OUT. id: '+ this.id)
}

mysvg.on({'onload': AfterLoad, 'onadd': AfterAdd, 'onclick': OnClick, 'onmouseover': OnMouseOver, 'onmouseout': OnMouseOut });

Note: callback functions 'onclick', 'onmouseover', 'onmouseout' will apply after file loading completed for tags and objects specified in the mask.
See also: loadFile, addFile.

Load SVG-file

loadFile (filename, <mask="path, rect, circle, tspan, use">)

Load SVG-file. Parameters: filename - path to svg-file, mask (optionaly) - defines tags and objects list for which will to handle the events 'onclick', 'onmouseover', 'onmouseout'. See also: on(callback) Example:

        
mysvg.loadFile('svg-files/circuit.svg') // uses default mask: "path, rect, circle, tspan, use"

mysvg.loadFile('svg-files/circuit.svg', "path, rect, circle") // mask for tags 'path', 'rect', 'circle'

mysvg.loadFile('svg-files/circuit.svg', "rect, #office , #plant") // mask for tags 'rect' and objects ID 'office', 'plant'

addFile (filename, options)

Add SVG-file. Parameters: filename - path to svg-file, options - size, position and id. Options structure:

          
{
  id: [id]                // set ID
  width: [width],         // resize to width
  height: [height],       // resize to height
  x: [position left],     // set position X; interpreted as offset when specified parameter 'location'
  y: [position top],      // set position Y; interpreted as offset when specified parameter 'location'
  location: < ID >,       // Object ID. Specify the object ID to tie position of new object with exists object. Optional.
}

Example:

          

//The new object will be placed at the same coordinates that the object 'g3516' have.
mysvg.addFile('svg-files/caution.svg', {width: 20, height:20, location:'g3516', x:0, y:0, id:'CautionIcon'})

//The new object will be placed at the coordinates 10, 10
mysvg.addFile('svg-files/caution.svg', {width: 20, height:20, x:10, y:10, id:'CautionIcon1'})

Operations with objects

getIDList (mask="*")

Return a list of objects ID. You can use 'mask' to filter objects. Example:

            
var ID_list = mysvg.getIDList() // return list of all objects

var ID_list_rect = mysvg.getIDList('rect') // return list of all 'rect' tags

deleteObj(id)

Remove object. Example:

            
mysvg.deleteObj('CautionIcon')

getObjCenter(id)

Returns a object's center coordinates (x,y). Example:

            
var oj_center = mysvg.getObjCenter('CautionIcon')
console.log('X: ' + oj_center.x)
console.log('Y: ' + oj_center.y)
console.log('Scale: ' + oj_center.scale)

View control

zoomXY(x, y, scale, zoomOptions = this.options.ZoomSlow)

Change a view position and scale.

x - position from top
y - position from left
scale - zoom
zoomOptions - zoom options. Determines the speed of view changing.

Example:

          
mysvg.zoomXY(80, 20, 1.5)
...
mysvg.zoomXY(80, 20, 5.0, {'delay':500, 'duration':2500})

zoomObj(id, scale = 0, zoomOptions = this.options.ZoomSlow)

Move view to object position.

id - object ID
scale - zoom. if scale = 0 then scale will be calculated to show object on the screen with maximum available scale.
scale - zoom
zoomOptions - zoom options. Determines the speed of view changing.

Example:

          
mysvg.zoomObj('CautionIcon')
...
mysvg.zoomObj('CautionIcon', 5)
...
mysvg.zoomObj('CautionIcon', 0, {'delay':0, 'duration':0})

zoomReset(zoomOptions = this.options.ZoomFast)

Resets scale and view's position to initial values.

zoomOptions - zoom options. Determines the speed of view changing.

Example:

          
mysvg.zoomReset()
...
mysvg.zoomReset({'delay':500, 'duration':2500})
...
mysvg.zoomReset(mysvg.options.ZoomFast)

viewZ(inc, zoomOptions = this.options.ZoomFast)

Change scale of view. Example:

            
mysvg.viewZ(0.5)
...
mysvg.viewZ(-0.5)

viewX(inc, zoomOptions = this.options.ZoomFast)

Change horizontal position of view. Example:

            
mysvg.viewX(0.5)
...
mysvg.viewX(-0.5)

viewY(inc, zoomOptions = this.options.ZoomFast)

Change vertical position of view. Example:

            
mysvg.viewY(0.5)
...
mysvg.viewY(-0.5)

Style & Attributes

getObjAttr(id, attribute)

Returns the object attribute.

setObjAttr (id, attributes)

Sets the the object attributes. Example:

          
mysvg.setObjAttr('CautionIcon', {'x': 20, 'y':40})

getStyle (id, key)

Returns the object style

setStyle (id, key, value)

Sets the object style

setObjXY (id, x, y)

Sets the object position. Equivalent setObjAttr(id, {'x': xvalue, 'y': yvalue})

Note: Not all objects can be relocated by attributes changing. Please use this method for svg files loaded by 'addFile'.

setObjOffset (id, offsetX, offsetY)

Move object relative to the current position. Example:

          
mysvg.setObjOffset('CautionIcon', {'x': -35, 'y':0})

hide (id)

Hide object

show(id)

Show object

Text fields

setText(id, text)

Change text field caption.

setTextColor(id, color)

Change text field color.

setTextFontFamily(id, font)

Change text field font.

setTextFontSize(id, fontsize)

Change text field font size.

setTextStyle(id, options={ bold: false, italic: false, underline: false })

Change text field style. Example:

          
mysvg.setTextStyle('TextLabel', {bold: true, underline: true})

setTextXY(id, x, y)

Sets text field position.

setTextOffset(id, offsetX, offsetY)

Move text field relative to the current position.

Animation

setAnimation(id, animation)

Run object animation. Several animations is defined in the library:

blink
blink-nonstop
border-dash
border-dash-nonstop
border-red
border-red-nonstop

You can define and use custom animations.

Standard animation:

          
mysvg.setAnimation('CautionIcon', 'blink')

Custom animation:

          
var MyAanimation = {
  "tag": "animate",
  "attributeName": "stroke",
  "attributeType": "CSS",
  "from": "#FFFFFF",
  "to": "#FF0000",
  "begin": "0s",
  "dur": "0.2s",
  "repeatCount": "25" 
};

mysvg.setAnimation('CautionIcon', MyAanimation)

You can define several animations and then apply to objects this way:

          
mysvg.animation = {
  'MyAanimation1': {
    "tag": "animate",
    "attributeName": "stroke",
    "attributeType": "CSS",
    "from": "#FFFFFF",
    "to": "#FF0000",
    "begin": "0s",
    "dur": "0.2s",
    "repeatCount": "25"
  },
  'MyAanimation2': {
    "tag": "animate",
    "attributeName": "stroke",
    "attributeType": "CSS",
    "from": "#FFFFFF",
    "to": "#FF0000",
    "begin": "0s",
    "dur": "0.2s",
    "repeatCount": "25"
  }    
};

mysvg.setAnimation('CautionIcon', 'MyAanimation1')

removeAnimation(id)

Stop object animation.