The attributes in JointJS define how the graphics elements are to be rendered inside of the element and link views. All the standard SVG styling properties are available (both kebab-case and camelCase styles).

In addition JointJS modifies the behavior of existing attributes (the use of calc() for specifying attribute values) and defines new so-called "special" attributes and allows programmers to define their own.

calc()

The calc() function lets you perform calculations when specifying SVG attributes values.

Syntax:

The calc() function takes a simple expression as its parameter, with the expression's result used as the value. The expression can be any simple expression in one of the following forms:

• Variable

  'calc(w)'

• Variable Addition or Subtraction

  'calc(w + 5)'
  'calc(h - 10)'

• Multiplication Variable

  'calc(2 * w)'
  'calc(0.5 * h)'

• Multiplication Variable Addition or Subtraction

  'calc(2 * w + 5)'
  'calc(0.5 * h - 10)'

Where:

• Variable is a symbol representing a value that can change, when the model attributes change (size, attrs).

  variable	name	description
  w	width	The current width of the model (model.prop('size/width')). The value can be bound to an SVGElement's size instead by using ref attribute.
  h	height	The current height of the model (model.prop('size/height')). The value can be bound to an SVGElement's size instead by using ref attribute.
  s	shortest	The shortest side of the rectangle. The minimum of width and height.
  l	longest	The longest side of the rectangle. The maximum of width and height.
  d	diagonal	The length of the diagonal of the rectangle of size width and height.

• Multiplication is an optional floating number factor of the variable. It's a number followed by the * symbol.

  1.5 *

• Addition or Subtraction is an optional floating number added or subtracted from the variable. It's a + or - symbol followed by a number.

  + 5

Notes:

• Expression is case-sensitive.
• The +, - and * operators do not require whitespace.
• No extra parentheses are allowed.

It can be used with the following attributes:

• SVGRectElement
  • x
  • y
  • rx
  • ry
  • width
  • height
• SVGImageElement
  • x
  • y
  • width
  • height
• SVGLineElement
  • x1
  • x2
  • y2
  • y2
• SVGEllipseElement
  • cx
  • cy
  • rx
  • ry
• SVGCircleElement
  • cx
  • cy
  • r
• SVGPolygonElement
  • points
• SVGPolylineElement,
  • points
• SVGPathElement
  • d
• SVGTextElement
  • x
  • y
  • dx
  • dy
• Any SVG element (e.g. SVGGElement )
  • transform

Examples:

el.resize(200, 100); // dia.Element

// <rect joint-selector="myRect" width="200" height="100" rx="20" ry="10" />
el.attr('myRect', {
   width: 'calc(w)',
   height: 'calc(h)',
   rx: 'calc(0.1*w)',
   ry: 'calc(0.1*h)'
});

// <image joint-selector="myImage" x="105" y="55" />
el.attr('myImage/x', 'calc(0.5*w+5)');
el.attr('myImage/y', 'calc(0.5*h+5)');

// <path joint-selector="myPath" d="M 10 50 190 50" />
el.attr('myPath/d', 'M 10 calc(0.5*h) calc(w-10) calc(0.5*h)')

// <polygon joint-selector="myPolygon" points="0,0 200,0 200,100 0,100" />
el.attr('myPolygon/d', '0,0 calc(w),0 calc(w),calc(h) 0,calc(h)');

Here is the list of all built-in attributes.