Skip to main content

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 define the styling of diagram elements, links, and labels in JointJS is through attrs objects. If the attributes passed are standard SVG attributes, they are merely passed down to the individual SVGElements of the shape; then it is the job of the browser to apply them to the elements and render the shapes in the requested manner when asked to do so by JointJS View classes. However, 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.

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; have a look, for example, at MDN's SVG Attribute reference. In this section, we want to show you what additional things JointJS allows you to do.

In this section we present several materials on learning the most special attributes. The full list of special presentation attributes is presented in our API reference.