Element

Element.node()⚓➭

Gives you a reference to the DOM object, so you can assign event handlers or just mess around.

Usage

// draw a circle at coordinate 10,10 with radius of 10
var c = paper.circle(10, 10, 10);
c.node.onclick = function () {
    c.attr("fill", "red");
};

Element.type()⚓➭

SVG tag name of the given element.

Element.attr(…)⚓➭

Gets or sets given attributes of the element.

Parameters

  1. params object contains key-value pairs of attributes you want to set

or

Parameters

  1. param string name of the attribute

Returns: Element the current element

or

Returns: string value of attribute

Usage

el.attr({
    fill: "#fc0",
    stroke: "#000",
    strokeWidth: 2, // CamelCase...
    "fill-opacity": 0.5, // or dash-separated names
    width: "*=2" // prefixed values
});
console.log(el.attr("fill")); // #fc0

Prefixed values in format "+=10" supported. All four operations (+, -, * and /) could be used. Optionally you can use units for + and -: "+=2em".

Element.children()⚓➭

Returns array of all the children of the element.

Returns: array array of Elements

Element.toJSON()⚓➭

Returns object representation of the given element and all its children.

Returns: object in format

  1. {
    1. type string this.type,
    2. attr object attributes map,
    3. childNodes array optional array of children in the same format
  2. }

Element.getBBox()⚓➭

Returns the bounding box descriptor for the given element

Returns: object bounding box descriptor:

  1. {
    1. cx: number x of the center,
    2. cy: number x of the center,
    3. h: number height,
    4. height: number height,
    5. path: string path command for the box,
    6. r0: number radius of a circle that fully encloses the box,
    7. r1: number radius of the smallest circle that can be enclosed,
    8. r2: number radius of the largest circle that can be enclosed,
    9. vb: string box as a viewbox command,
    10. w: number width,
    11. width: number width,
    12. x2: number x of the right side,
    13. x: number x of the left side,
    14. y2: number y of the bottom edge,
    15. y: number y of the top edge
  2. }

Element.transform(tstr)⚓➭

Gets or sets transformation of the element

Parameters

  1. tstr string transform string in Snap or SVG format

Returns: Element the current element

or

Returns: object transformation descriptor:

  1. {
    1. string string transform string,
    2. globalMatrix Matrix matrix of all transformations applied to element or its parents,
    3. localMatrix Matrix matrix of transformations applied only to the element,
    4. diffMatrix Matrix matrix of difference between global and local transformations,
    5. global string global transformation as string,
    6. local string local transformation as string,
    7. toString function returns string property
  2. }

Element.parent()⚓➭

Returns the element's parent

Returns: Element the parent element

Element.append(el)⚓➭

Appends the given element to current one

Parameters

  1. el Element Set element to append

Returns: Element the parent element

Element.appendTo(el)⚓➭

Appends the current element to the given one

Parameters

  1. el Element parent element to append to

Returns: Element the child element

Element.prepend(el)⚓➭

Prepends the given element to the current one

Parameters

  1. el Element element to prepend

Returns: Element the parent element

Element.prependTo(el)⚓➭

Prepends the current element to the given one

Parameters

  1. el Element parent element to prepend to

Returns: Element the child element

Element.before(el)⚓➭

Inserts given element before the current one

Parameters

  1. el Element element to insert

Returns: Element the parent element

Element.after(el)⚓➭

Inserts given element after the current one

Parameters

  1. el Element element to insert

Returns: Element the parent element

Element.insertBefore(el)⚓➭

Inserts the element after the given one

Parameters

  1. el Element element next to whom insert to

Returns: Element the parent element

Element.insertAfter(el)⚓➭

Inserts the element after the given one

Parameters

  1. el Element element next to whom insert to

Returns: Element the parent element

Element.remove()⚓➭

Removes element from the DOM

Returns: Element the detached element

Element.select(query)⚓➭

Gathers the nested Element matching the given set of CSS selectors

Parameters

  1. query string CSS selector

Returns: Element result of query selection

Element.selectAll(query)⚓➭

Gathers nested Element objects matching the given set of CSS selectors

Parameters

  1. query string CSS selector

Returns: Set array result of query selection

Element.asPX(attr, [value])⚓➭

Returns given attribute of the element as a px value (not %, em, etc.)

Parameters

  1. attr string attribute name
  2. value string attribute value

Returns: Element result of query selection

Element.use()⚓➭

Creates a <use> element linked to the current element

Returns: Element the <use> element

Element.clone()⚓➭

Creates a clone of the element and inserts it after the element

Returns: Element the clone

Element.toDefs()⚓➭

Moves element to the shared <defs> area

Returns: Element the element

Element.toPattern(x, y, width, height)⚓➭

Creates a <pattern> element from the current element To create a pattern you have to specify the pattern rect:

Parameters

  1. x string number
  2. y string number
  3. width string number
  4. height string number

Returns: Element the <pattern> element

You can use pattern later on as an argument for fill attribute: 

var p = paper.path("M10-5-10,15M15,0,0,15M0-5-20,15").attr({
        fill: "none",
        stroke: "#bada55",
        strokeWidth: 5
    }).pattern(0, 0, 10, 10),
    c = paper.circle(200, 200, 100);
c.attr({
    fill: p
});

Element.marker(x, y, width, height, refX, refY)⚓➭

Creates a <marker> element from the current element To create a marker you have to specify the bounding rect and reference point:

Parameters

  1. x number
  2. y number
  3. width number
  4. height number
  5. refX number
  6. refY number

Returns: Element the <marker> element

You can specify the marker later as an argument for marker-start, marker-end, marker-mid, and marker attributes. The marker attribute places the marker at every point along the path, and marker-mid places them at every point except the start and end.

Element.inAnim()⚓➭

Returns a set of animations that may be able to manipulate the current element

Returns: object in format:

  1. {
    1. anim object animation object,
    2. mina object mina object,
    3. curStatus number 0..1 — status of the animation: 0 — just started, 1 — just finished,
    4. status function gets or sets the status of the animation,
    5. stop function stops the animation
  2. }

Element.stop()⚓➭

Stops all the animations for the current element

Returns: Element the current element

Element.animate(attrs, duration, [easing], [callback])⚓➭

Animates the given attributes of the element

Parameters

  1. attrs object key-value pairs of destination attributes
  2. duration number duration of the animation in milliseconds
  3. easing function easing function from mina or custom
  4. callback function callback function that executes when the animation ends

Returns: Element the current element

Element.data(key, [value])⚓➭

Adds or retrieves given value associated with given key. (Don’t confuse with data- attributes)

See also Element.removeData

Parameters

  1. key string key to store data
  2. value any value to store

Returns: object Element

or, if value is not specified:

Returns: any value

Usage

for (var i = 0, i

Element.removeData([key])⚓➭

Removes value associated with an element by given key. If key is not provided, removes all the data of the element.

Parameters

  1. key string key

Returns: object Element

Element.outerSVG()⚓➭

Returns SVG code for the element, equivalent to HTML's outerHTML.

See also Element.innerSVG

Returns: string SVG code for the element

Element.innerSVG()⚓➭

Returns SVG code for the element's contents, equivalent to HTML's innerHTML

Returns: string SVG code for the element

Element.addClass(value)⚓➭

Adds given class name or list of class names to the element.

Parameters

  1. value string class name or space separated list of class names

Returns: Element original element.

Element.removeClass(value)⚓➭

Removes given class name or list of class names from the element.

Parameters

  1. value string class name or space separated list of class names

Returns: Element original element.

Element.hasClass(value)⚓➭

Checks if the element has a given class name in the list of class names applied to it.

Parameters

  1. value string class name

Returns: boolean true if the element has given class

Element.toggleClass(value, flag)⚓➭

Add or remove one or more classes from the element, depending on either the class’s presence or the value of the flag argument.

Parameters

  1. value string class name or space separated list of class names
  2. flag boolean value to determine whether the class should be added or removed

Returns: Element original element.

Element.click(handler)⚓➭

Adds a click event handler to the element

Parameters

  1. handler function handler for the event

Returns: object Element

Element.unclick(handler)⚓➭

Removes a click event handler from the element

Parameters

  1. handler function handler for the event

Returns: object Element

Element.dblclick(handler)⚓➭

Adds a double click event handler to the element

Parameters

  1. handler function handler for the event

Returns: object Element

Element.undblclick(handler)⚓➭

Removes a double click event handler from the element

Parameters

  1. handler function handler for the event

Returns: object Element

Element.mousedown(handler)⚓➭

Adds a mousedown event handler to the element

Parameters

  1. handler function handler for the event

Returns: object Element

Element.unmousedown(handler)⚓➭

Removes a mousedown event handler from the element

Parameters

  1. handler function handler for the event

Returns: object Element

Element.mousemove(handler)⚓➭

Adds a mousemove event handler to the element

Parameters

  1. handler function handler for the event

Returns: object Element

Element.unmousemove(handler)⚓➭

Removes a mousemove event handler from the element

Parameters

  1. handler function handler for the event

Returns: object Element

Element.mouseout(handler)⚓➭

Adds a mouseout event handler to the element

Parameters

  1. handler function handler for the event

Returns: object Element

Element.unmouseout(handler)⚓➭

Removes a mouseout event handler from the element

Parameters

  1. handler function handler for the event

Returns: object Element

Element.mouseover(handler)⚓➭

Adds a mouseover event handler to the element

Parameters

  1. handler function handler for the event

Returns: object Element

Element.unmouseover(handler)⚓➭

Removes a mouseover event handler from the element

Parameters

  1. handler function handler for the event

Returns: object Element

Element.mouseup(handler)⚓➭

Adds a mouseup event handler to the element

Parameters

  1. handler function handler for the event

Returns: object Element

Element.unmouseup(handler)⚓➭

Removes a mouseup event handler from the element

Parameters

  1. handler function handler for the event

Returns: object Element

Element.touchstart(handler)⚓➭

Adds a touchstart event handler to the element

Parameters

  1. handler function handler for the event

Returns: object Element

Element.untouchstart(handler)⚓➭

Removes a touchstart event handler from the element

Parameters

  1. handler function handler for the event

Returns: object Element

Element.touchmove(handler)⚓➭

Adds a touchmove event handler to the element

Parameters

  1. handler function handler for the event

Returns: object Element

Element.untouchmove(handler)⚓➭

Removes a touchmove event handler from the element

Parameters

  1. handler function handler for the event

Returns: object Element

Element.touchend(handler)⚓➭

Adds a touchend event handler to the element

Parameters

  1. handler function handler for the event

Returns: object Element

Element.untouchend(handler)⚓➭

Removes a touchend event handler from the element

Parameters

  1. handler function handler for the event

Returns: object Element

Element.touchcancel(handler)⚓➭

Adds a touchcancel event handler to the element

Parameters

  1. handler function handler for the event

Returns: object Element

Element.untouchcancel(handler)⚓➭

Removes a touchcancel event handler from the element

Parameters

  1. handler function handler for the event

Returns: object Element

Element.hover(f_in, f_out, [icontext], [ocontext])⚓➭

Adds hover event handlers to the element

Parameters

  1. f_in function handler for hover in
  2. f_out function handler for hover out
  3. icontext object context for hover in handler
  4. ocontext object context for hover out handler

Returns: object Element

Element.unhover(f_in, f_out)⚓➭

Removes hover event handlers from the element

Parameters

  1. f_in function handler for hover in
  2. f_out function handler for hover out

Returns: object Element

Element.drag(onmove, onstart, onend, [mcontext], [scontext], [econtext])⚓➭

Adds event handlers for an element's drag gesture

Parameters

  1. onmove function handler for moving
  2. onstart function handler for drag start
  3. onend function handler for drag end
  4. mcontext object context for moving handler
  5. scontext object context for drag start handler
  6. econtext object context for drag end handler

Additionaly following drag events are triggered: drag.start.<id> on start, drag.end.<id> on end and drag.move.<id> on every move. When element is dragged over another element drag.over.<id> fires as well.

Start event and start handler are called in specified context or in context of the element with following parameters:

  1. x number x position of the mouse
  2. y number y position of the mouse
  3. event object DOM event object

Move event and move handler are called in specified context or in context of the element with following parameters:

  1. dx number shift by x from the start point
  2. dy number shift by y from the start point
  3. x number x position of the mouse
  4. y number y position of the mouse
  5. event object DOM event object

End event and end handler are called in specified context or in context of the element with following parameters:

  1. event object DOM event object

Returns: object Element

Element.undrag()⚓➭

Removes all drag event handlers from the given element

Element.getTotalLength()⚓➭

Returns the length of the path in pixels (only works for path elements)

Returns: number length

Element.getPointAtLength(length)⚓➭

Returns coordinates of the point located at the given length on the given path (only works for path elements)

Parameters

  1. length number length, in pixels, from the start of the path, excluding non-rendering jumps

Returns: object representation of the point:

  1. {
    1. x: number x coordinate,
    2. y: number y coordinate,
    3. alpha: number angle of derivative
  2. }

Element.getSubpath(from, to)⚓➭

Returns subpath of a given element from given start and end lengths (only works for path elements)

Parameters

  1. from number length, in pixels, from the start of the path to the start of the segment
  2. to number length, in pixels, from the start of the path to the end of the segment

Returns: string path string definition for the segment