V (Vectorizer)
JointJS exports three global variables, the joint
namespace, the V
variable and the g
variable (that is described later in the Geometry section). The V
variable is a function of a little SVG helper library that we call Vectorizer. The reason why this library sits in its own namespace and not inside the joint
namespace is that it can be used completely standalone, even without JointJS. It is a very helpful library making life easier when dealing with SVG. You can think of it as of a very lightweight jQuery for SVG. If you want to use Vectorizer as a standalone library, see the download page that contains both the development and minified versions.
constructor​
V(svg)
Return a Vectorizer object. If svg
parameter is a string, construct SVG DOM elements from the string markup. If svg
is an SVG DOM element, just wrap that element by the Vectorizer object and return it. You can think of this function as of the jQuery $ function except that the V
function does not accept selectors. The Vectorizer object contains a reference to the original SVG DOM element in its node
property.
var vel = V('<g><rect/><text/></g>');
console.log(vel.node);
Methods​
addClass()​
vel.addClass(className)
Append className
to the element class
attribute if it doesn't contain it already. Return the Vectorizer object for easy chaining.
animateAlongPath()​
vel.animateAlongPath(attrs, path)
Animate the element along the path
SVG element (or Vectorizer object). attrs
contain Animation Timing attributes describing the animation. The following example shows how to send a token along a JointJS link element:
var c = V('circle', { r: 8, fill: 'red' });
c.animateAlongPath({ dur: '4s', repeatCount: 'indefinite' }, paper.findViewByModel(myLink).$('.connection')[0]);
V(paper.svg).append(c);
append()​
vel.append(els)
Append another element (or elements) els
as the last child of the element. els
can be Vectorizer object(s) or SVG DOM element(s).
appendTo()​
vel.appendTo(node)
Append vel.node
as a child to node
.