Special presentation attributes

Special presentation attributes are JointJS-specific presentation attributes that offer functionality beyond that of native SVG attributes. They become much more important when we talk about creating custom shapes and other markup-using features such as ports, link labels etc.

The main way to customize the styling of diagram elements, links, labels, and ports in JointJS is through the attrs model attribute:

• If the attributes specified in this object are standard SVG attributes, they are merely passed down to the individual subelements of the shape; then it is the job of the browser to apply them to the SVGElements and render the shapes in the requested manner when asked to do so by a JointJS view class (i.e. when a model is added to the graph or when the model's attributes are changed).
• If JointJS encounters one of its special attributes, it takes over with custom logic in order to offer advanced functionality; the results are then encoded back as standard SVG attributes.

note

All JointJS special attributes use camelCase naming. For consistency, it is thus very strongly recommended that you make use JointJS's ability to translate camelCase into native SVG's kebab-case, and use camelCase when setting native SVG attributes as well (i.e. strokeWidth instead of native 'stroke-width').

A list of native SVG attributes can be found elsewhere on the Internet. For example, have a look at MDN's SVG Attribute reference.

In this section, we want to show you what additional things JointJS allows you to do with special presentation attributes. The full list is presented in our API reference.

Relative dimensions

JointJS provides a calc() function which lets you perform calculations when specifying SVG attributes values. This allows you to size subelements relative to the size of the shape's model.

Link arrowheads

JointJS offers a calc() function for performing calculations in SVG attribute values, enabling sizing subelements relative to the shape's model size.

Relative position on links

Learn how to use connection, atConnectionLength, and atConnectionRatio attributes in JointJS for precise positioning and rotation of subelements along SVG path links.

Link subelement labels

Special attributes also allow us to create custom labeling subelements - both those that adjust their rotation according to the underlying link path and those that always keep the same angle.

Filters & Gradients

In this section, we introduce filters and gradients to style JointJS shapes. JointJS uses standard SVG filters and gradients, defined with JavaScript objects instead of SVG markup code.