The target RaphaelTechnology.
Unique id of the element. Especially useful when you want to listen to events of the element, because all
events are fired in format <module>.<action>.<id>. Also useful for the RaphaelPaper.getById method.
The current transform matrix representing the total transform of this element.
Reference to the next element in the hierarchy.
Gives you a reference to the DOM object, so you can assign event handlers or just mess around.
Note: Don’t mess with it.
Internal reference to paper where object drawn. Mainly for use in plugins and element extensions.
Reference to the previous element in the hierarchy.
Internal reference to Raphaël object, in case it is not available.
The type of this element, i.e. path.
Creates and starts animation for given element.
Final attributes for the element, see also attr.
Number of milliseconds for the animation to run.
Easing type. Accept one of RaphaelStatic.easing_formulas or CSS forms such as
cubic‐bezier(XX, XX, XX, XX).
Callback function. Will be called at the end of animation.
this element for chaining.
Creates and starts animation for given element.
The animation to apply to this element. Use RaphaelStatic.animation to create an animation.
this element for chaining.
Acts similar to animate, but ensures that the given animation runs in sync with another given element.
Element to sync with.
animation to sync with.
Final attributes for the element, see also attr.
Number of milliseconds for the animation to run.
Easing type. Accept one of RaphaelStatic.easing_formulas or CSS forma such as
cubic‐bezier(XX, XX, XX, XX).
Callback function. Will be called at the end of animation.
this element for chaining.
Acts similar to animate, but ensures that the given animation runs in sync with another given element.
Element to sync with.
animation to sync with.
The animation to apply to this element. Use RaphaelStatic.animation to create an animation.
this element for chaining.
Set the given attribute of this element to the given value.
Type of the attribute name to set.
Name of an attribute to set.
New value for the attribute.
this element for chaining.
Finds the current value of the given attribute.
Type of the attribute name to read.
Name of the attribute to read.
The value of the given attribute, or undefined if the attribute is unset or does not exist.
Finds the current value of the given attributes.
Type of the attribute names to read.
Names of the attributes to read.
A tuple with the values of the given attribute names.
Writes the given attributes to this element.
Attributes to set on this element.
this element for chaining.
Adds an event handler for the click event to this element.
Handler for the event.
this element for chaining.
Create a new element with all properties and attributes of this element.
A clone of this element.
Retrieves the value associated with the given key. See also removeData.
Key of the datum to retrieve.
The data associated with the given key.
Adds the given value associated with the given key. See also removeData.
Key of the datum to store.
Datum to store.
Adds an event handler for the double click event to this element.
Handler for the event.
this element for chaining.
Adds the event handlers for a drag of this element.
Type of the this context for the onMove handler.
Type of the this context for the onStart handler.
Type of the this context for the onEnd handler.
Handler for when the pointer is moved while dragging.
Handler for when the dragging starts.
Handler for when the dragging ends.
The this context with which the onMove handler is invoked.
The this context with which the onStart handler is invoked.
The this context with which the onEnd handler is invoked.
this element for chaining.
Returns a bounding box for this element.
true if you want to have bounding box before transformations are applied.
Default is false.
The smallest bounding box that contains this element.
Finds the coordinates of the point located at the given length on this path.
Length at which to get the point.
The point located at the given length on this path.
Return a sub path of this path from the given length to the given length.
Position of the start of the segment.
Position of the end of the segment
An SVG path string for the segment.
Finds the total length of this path.
The length of this path in pixels
Return a set of elements that create a glow-like effect around this element.
Note: Glow is not connected to the element. If you change element attributes it will not adjust itself.
Optional settings for the glow effect.
A set of elements that produce the given glow effect.
Makes this element invisible. See also RaphaelElement.show.
this element for chaining.
Adds event handlers for the hover events to this element.
Type of the this context for the onHoverIn handler.
Type of the this context for the onHoverOut handler.
Handler for when the pointer enters this element.
Handler for when the pointer leaves this element.
The this context with which the onHoverIn handler is invoked.
The this context with which the onHoverOut handler is invoked.
this element for chaining.
Inserts current object after the given one in the DOM.
Element to insert.
this element for chaining.
Inserts current object before the given one.
Element to insert.
this element for chaining.
Determine if given point is inside this element’s shape
x coordinate of the point
y coordinate of the point
true if point inside the shape
Adds an event handler for the mousedown event to this element.
Handler for the event.
this element for chaining.
Adds an event handler for the mousemove event to this element.
Handler for the event.
this element for chaining.
Adds an event handler for the mouseout event to this element.
Handler for the event.
this element for chaining.
Adds an event handler for the mouseover event to this element.
Handler for the event.
this element for chaining.
Adds an event handler for the mouseup event to this element.
Handler for the event.
this element for chaining.
Shortcut for assigning an event handler for the drag.over.<id> event, where id is the ID of the element,
see RaphaelElement.id.
Handler for event, first argument would be the element you are dragging over
this element for chaining.
Stops an animation of this element with the ability to resume it later on.
Animation to pause. If not given, pauses all current animations.
this element for chaining.
Removes this element from the paper.
Removes the value associated with this element by the given key. If the key is not provided, removes all the data of this element.
Key of the datum to remove.
this element for chaining.
Resumes animation if it was paused with RaphaelElement.pause method.
The animation that was paused. If not given, resumes all currently paused animations.
this element for chaining.
Rotates this element by the given angle around the given point.
Angle in degrees by which to rotate.
Horizontal coordinate of the center of rotation.
Vertical coordinate of the center of rotation.
this element for chaining.
Rotates this element by the given angle around the center of this shape.
Angle in degrees by which to rotate.
this element for chaining.
Scales this element by the given scale factor, relative to the given center.
Horizontal part of the scale factor.
Vertical part of the scale factor.
Horizontal coordinate of the center of the scaling operation.
Vertical coordinate of the center of the scaling operation.
this element for chaining.
Scales this element by the given scale factor. The center of this shape is used as the center of the scaling operation.
Horizontal part of the scale factor.
Vertical part of the scale factor. If not given, defaults to scaleFactorX.
this element for chaining.
Sets the status of animation of the element in milliseconds. Similar to status method.
Animation for which to set the status.
Number of milliseconds from the beginning of the animation.
this element for chaining.
Makes this element visible. See also RaphaelElement.hide.
this element for chaining.
Gets the status (normalized animation time) of the current animations of this element.
The status of all animations currently playing.
Gets the status of the given animation of this element.
Animation object for which to retrieve the status.
The current value (normalized animation time) of the given animation.
Sets the status of the given animation of this element to the given value. This will cause the animation to jump to the given position.
Animation object for which to set the status.
New value (normalized animation time) for the animation, between 0 and 1.
this element for chaining.
Stops all or the the given animation of this element.
An animation to stop. If not given, stops all animations currently playing.
this element for chaining.
Moves this element so it is the furthest from the viewer’s eyes, behind other elements.
this element for chaining.
Moves this element so it is the closest to the viewer’s eyes, on top of other elements.
this element for chaining.
Adds an event handler for the touchcancel event to this element.
Handler for the event.
this element for chaining.
Adds an event handler for the touchend event to this element.
Handler for the event.
this element for chaining.
Adds an event handler for the touchmove event to this element.
Handler for the event.
this element for chaining.
Adds an event handler for the touchstart event to this element.
Handler for the event.
this element for chaining.
Returns the current transformation of this element. This transformation is separate to other attributes, i.e. translation does not change x or y of the rectangle. The format of transformation string is similar to the path string syntax:
"t100,100r30,100,100s2,2,100,100r45s1.5"
Each letter is a command. There are four commands:
t is for translater is for rotate,s is for scalem is for matrix.So, the example line above could be read like
translate by 100, 100;
rotate 30° around 100, 100;
scale twice around 100, 100;
rotate 45° around centre;
scale 1.5 times relative to centre
As you can see rotate and scale commands have origin coordinates as optional parameters, the default is the centre point of the element. Matrix accepts six parameters.
// to get current value call it without parameters
console.log(el.transform());
The current transformation of this element.
Adds transformation to this element which is separate to other attributes, i.e. translation does not change x or y of the rectangle. The format of transformation string is similar to the path string syntax:
"t100,100r30,100,100s2,2,100,100r45s1.5"
Each letter is a command. There are four commands:
t is for translater is for rotate,s is for scalem is for matrix.So, the example line above could be read like
translate by 100, 100;
rotate 30° around 100, 100;
scale twice around 100, 100;
rotate 45° around centre;
scale 1.5 times relative to centre
As you can see rotate and scale commands have origin coordinates as optional parameters, the default is the centre point of the element. Matrix accepts six parameters.
var el = paper.rect(10, 20, 300, 200);
// translate 100, 100, rotate 45°, translate -100, 0
el.transform("t100,100r45t-100,0");
// if you want you can append or prepend transformations
el.transform("...t50,50");
el.transform("s2...");
// or even wrap
el.transform("t50,50...t-50-50");
// to reset transformation call method with empty string
el.transform("");
this element for chaining.
Translates this element by the given amount.
Amount by which to translate in the horizontal direction.
Amount by which to translate in the vertical direction.
this element for chaining.
Removes an event handler for the click event from this element. See click.
A handler to remove.
this element for chaining.
Removes an event handler for the double click event from this element. See dblclick.
A handler to remove.
this element for chaining.
Removes all drag event handlers from this element.
this element for chaining.
Removes the event handlers for the hover event from this element. See hover.
Hover-in handler to remove.
Hover-out handler to remove.
this element for chaining.
Removes an event handler for the mousedown event from this element. See mousedown.
A handler to remove.
this element for chaining.
Removes an event handler for the mousemove event from this element. See mousemove.
A handler to remove.
this element for chaining.
Removes an event handler for the mouseout event from this element. See mouseout.
A handler to remove.
this element for chaining.
Removes an event handler for the mouseover event from this element. See mouseover.
A handler to remove.
this element for chaining.
Removes an event handler for the mouseup event from this element. See mouseup.
A handler to remove.
this element for chaining.
Removes an event handler for the touchcancel event from this element. See touchcancel.
A handler to remove.
this element for chaining.
Removes an event handler for the touchend event from this element. See touchend.
A handler to remove.
this element for chaining.
Removes an event handler for the touchmove event from this element. See touchmove.
A handler to remove.
this element for chaining.
Removes an event handler for the touchstart event from this element. See touchstart.
A handler to remove.
this element for chaining.
Generated using TypeDoc
Represents a specific type of RaphaelElement, a path element. This element has got some additional methods.