LudoJS

ludo.svg.Node

ludo.svg.

new ludo.svg.Node(tag, properties, text)

Class for creating SVG DOM Nodes

Parameters:
Name Type Description
tag String
properties Object
text String
Source:
Example
var v = new ludo.View({
    renderTo: document.body,
    layout:{
        width:'matchParent', height:'matchParent'
    }
 });
 var svg = v.svg();

 var circle = svg.$('circle', { cx: 100, cy: 100, r: 50 });
 circle.css('fill', '#ff0000');

 svg.append(circle);

 circle.animate({
    cx:300, cy: 200
 },{
    duration: 1000,
    complete:function(){
        console.log('completed');
    }
 });

Methods

add(tagName, properties, text) → {ludo.svg.Node}

Adds a new child DOM node

Parameters:
Name Type Description
tagName String
properties Object
text String

content
Source:
Returns:

added node

Type
ludo.svg.Node
Example
var filter = new ludo.svg.Filter();
     filter.add('feGaussianBlur', { 'stdDeviation' : 2, result:'blur'  });

addClass(className) → {ludo.svg.Node}

Add css class to SVG node

Parameters:
Name Type Description
className String
Source:
Returns:
Type
ludo.svg.Node

addMask(mask)

Apply mask to node

Parameters:
Name Type Description
mask canvas.Node
Source:

animate(properties, options)

Function to animate SVG properties such as radius, x,y, colors etc.

When animating colors, set colors using the set function and not the css function since CSS fill and stroke has highest priority.

For demos, see
animation.php
queued-animation.php
transformation.php
clipping.php
masking.php

Parameters:
Name Type Description
properties Object

Properties to animate, example: { x: 100, width: 100 }
options Object

Animation options

Properties
Name Type Description
duration Object

Animation duration in milliseconds, default: 400/1000seconds
easing function

Reference to ludo.svg.easing easing function, example: ludo.svg.easing.linear
complete function

Function to execute on complete
progress function

Function executed after each animation step. Argument: completed from 0 to 1
queue Boolean

True to queue animations for this SVG element. Default: true
validate function

Option function called before each step of the animation. If this function returns false, the animation will stop.
Arguments: 1) unique id of animation 2) unique id of latest animation for this SVG element. Useful if new animation should stop old animation.
Source:
Example
// Animating using properties and options objects.
circle.animate({
     'cx': 100, cy: 100
},{
     easing: ludo.svg.easing.bounce,
     duration: 1000,
     complete:function(){
         console.log('Animation complete');
     },
     progress:function(t){ // float from 0 to 1
         console.log('Progress: ' + Math.round(t*100) + '%');
     }
});

// or with duration, easing and complete function as parameters.
circle.animate({
     'cx': 100, cy: 100
}, 400, ludo.svg.easing.bounce, function(){ console.log('finished') });

append(node) → {canvas.Node}

append a new node

Parameters:
Name Type Description
node canvas.View | canvas.Node

node
Source:
Returns:

parent

Type
canvas.Node

applyFilter(filter)

Apply filter to node

Parameters:
Name Type Description
filter canvas.Filter
Source:

attr(key, value) → {*}

Set or get attribute.

Parameters:
Name Type Description
key String
value String | Number | ludo.svg.Node
Source:
Returns:
Type
*
Example
var x = node.attr("x"); // Get attribute
node.attr("x", 100); // Sets attribute

clip(clip)

Apply clip path to node. Passed argument should be a "clipPath" node

Parameters:
Name Type Description
clip canvas.Node
Source:
Example
var svg = view.svg();

var clipPath = s.$('clipPath');
var clipCircle = s.$('circle', { cx:50,cy:50,r:50 });
clipPath.append(clipPath);
s.appendDef(clipPath); // Append clip path to <defs> node of <svg>

var rect = s.$('rect', { x:50, y:150, width:100,height:100, fill: '#ff0000' });
rect.clip(clipPath);

css(key, value) → {ludo.svg.Node}

Set or get CSS property

Parameters:
Name Type Description
key String
value String | Number
Source:
Returns:
Type
ludo.svg.Node
Example
var stroke = node.css('stroke'); // Get stroke css attribute
node.css('stroke', '#FFFFFF'); // set stroke css property

get(key) → {*}

Get SVG attribute

Parameters:
Name Type Description
key String
Source:
Returns:
Type
*

getBBox() → {Object}

Returns bounding box of el as an object with x,y, width and height.

Source:
Returns:
Type
Object

getRotate() → {Array}

Returns rotation as a [degrees, x, y]

Source:
Returns:
Type
Array

getSize() → {Object}

Returns rectangular size of element, i.e. bounding box width - bounding box x and
bounding box width - bounding box y. Values are returned as { x : 100, y : 150 }
where x is width and y is height.

Source:
Returns:

size x and y

Type
Object

getTranslate() → {Array}

Returns x and y translation, i.e. translated x and y coordinates

Source:
Returns:
Type
Array
Example
var translate = node.getTranslate(); // returns [x,y], example; [100,150]

getViewPort() → {ludo.svg.Node.el}

The element which established the current viewport. Often, the nearest ancestor ‘svg’ element. Null if the given element is the outermost svg element

Source:
Returns:

svg

Type
ludo.svg.Node.el

hasClass(className) → {Boolean}

Returns true if svg node has given css class name

Parameters:
Name Type Description
className String
Source:
Returns:
Type
Boolean
Example
var node = new ludo.svg.Node('rect', { id:'myId2'});
     node.addClass('myClass');
     alert(node.hasClass('myClass'));

hide()

Hides SVG node, i.e. set display css property to 'none'

Source:

isHidden() → {boolean}

Returns true if SVG node is hidden

Source:
Returns:
Type
boolean

offset() → {Object}

Returns nodes position relative to top SVG element

Source:
Returns:
Type
Object
Example
var pos = node.offset(); // returns {x: 100, y: 200 }

on(event, fn)

Add DOM events to SVG node

Parameters:
Name Type Description
event String
fn function
Source:

position()() → {Object}

Returns nodes position relative to parent

Source:
Returns:
Type
Object
Example
var pos = node.position(); // returns {x: 100, y: 200 }

removeAttr(key)

Remove SVG attribute

Parameters:
Name Type Description
key String
Source:

removeClass(className)

Remove css class name from css Node

Parameters:
Name Type Description
className String
Source:
Example
var node = new ludo.svg.Node('rect', { id:'myId2'});
     node.addClass('myClass');
     node.addClass('secondClass');
     node.removeClass('myClass');

rotate(degrees, x, y)

Rotate SVG node

Parameters:
Name Type Description
degrees Number

Rotation in degrees
x Number

Optional x coordinate to rotate about
y Number

Optional x coordinate to rotate about
Source:
Example
node.rotate(100); // Rotation is 100
node.rotate(50); // Rotation is 150

scale(x, y)

Scale SVG node. The difference between scale and setScale is that scale adds to existing
scale values

Parameters:
Name Type Description
x Number
y Number
Source:

set(key, value)

Set SVG node attribute. If a ludo.svg.Node object is sent as value, the set function will
set an url attribute( url(#).

Parameters:
Name Type Description
key String
value String | Number | ludo.svg.Node
Source:

setRotate(degrees, x, y)

Set rotation

Parameters:
Name Type Description
degrees Number

Rotation in degrees
x Number

Optional x coordinate to rotate about
y Number

Optional x coordinate to rotate about
Source:
Example
node.rotate(100); // Rotation is 100
node.rotate(50); // Rotation is 50

setScale(x, y)

Set scale

Parameters:
Name Type Description
x Number
y Number

(Optional y scale, assumes x if not set)
Source:

setTranslate(x, y)

Set SVG translation(movement in x and y direction)

Parameters:
Name Type Description
x Number
y Number
Source:
Example
node.setTranslate(500,100);
node.setTranslate(550,200); // Node is offset by 550x200 ( second translation overwrites first)

show()

Show SVG node, i.e. set display css property to ''

Source:

svg() → {ludo.svg.Node.el}

The nearest ancestor 'svg' element. Null if the given element is the outermost svg element.

Source:
Returns:

svg

Type
ludo.svg.Node.el

text(text)

Update text content of node

Parameters:
Name Type Description
text String
Source:

toFront()

Bring nodes to front (z index)

Source:

toFront()

Bring nodes to back (z index)

Source:

translate(x, y)

Translate SVG node(movement in x and y direction)

Parameters:
Name Type Description
x Number
y Number
Source:
Example
node.setTranslate(500,100);
node.setTranslate(550,200); // Node is offset by 1050x300 (first translation + second)

url(key, to)

Create url reference

Parameters:
Name Type Description
key String
to canvas.Node | String
Source:
Example
node.url('filter', filterObj); // sets node property filter="url(#<filterObj->id>)"
     node.url('mask', 'MyMask'); // sets node property mask="url(#MyMask)"