attributes

attributes

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).

info

The JointJS ready-to-use shapes use the camelCase style for attribute names.

Only one style should be used within an application. Mixing styles can lead to unexpected behavior.

// Setting attributes on the model
link.attr('line/stroke-width', 2);
link.attr('line/strokeWidth', 3);

// Both attributes are set.
// It's not clear which attribute will be used
link.attr('line'); // => { stroke-width: 2, strokeWidth: 3 }

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.

Here is the list of all built-in attributes in the attributes namespace.

atConnectionLengthIgnoreGradient

note

Valid within the LinkView context.

Move the subelement to the point at a given distance along the connection path but do not auto-orient it according to the path's gradient. Use a positive number to define the distance from the source of the link and a negative number from the target of the link.

link.attr('rectSelector', { atConnectionLengthIgnoreGradient: 30, width: 10, height: 10, fill: 'red' });

atConnectionLengthKeepGradient

alias: atConnectionLength

note

Valid within the LinkView context.

Move and auto-orient the subelement to the point at a given distance along the connection path. Use a positive number to define the distance from the source of the link and a negative number from the target of the link

link.attr('rectSelector', { atConnectionLength: 30, width: 10, height: 10, fill: 'red' });
link.attr('rectSelector', { atConnectionLengthKeepGradient: 30, width: 10, height: 10, fill: 'red' });

atConnectionRatioIgnoreGradient

note

Valid within the LinkView context.

Move the subelement to the point at a given ratio of the connection total length but do not auto-orient it according to the path's gradient. It accepts a number in the [0,1] range.

link.attr('rectSelector', { atConnectionRatioKeepGradient: .5, width: 10, height: 10, fill: 'red' });

atConnectionRatioKeepGradient

alias: atConnectionRatio

note

Valid within the LinkView context.

Move and auto-orient the subelement to the point at a given ratio of the connection total length. It accepts a number in the [0,1] range.

link.attr('rectSelector', { atConnectionRatio: .5, width: 10, height: 10, fill: 'red' });
link.attr('rectSelector', { atConnectionRatioKeepGradient: .5, width: 10, height: 10, fill: 'red' });

connection

applies to: <path/>

note

Valid within the LinkView context.

If true, set the shape of the subelement to match the shape of the LinkView (set the 'd' attribute to the result of the link connector).

You can also provide an object with the following options:

Name	Type	Description
stubs	Number	If provided, display only the beginning and end stubs of the connection and hide the remaining central section. A positive value determines the length of each stub. If the value is negative, it determines the length of the hidden section of the connection between the two stubs.

link1.attr('pathSelector', { connection: true, stroke: 'red', fill: 'none' });
link2.attr('pathSelector', { connection: { stubs: -20 }});

containerSelector

Designate another subelement of the cell as a proxy target for the cell's container, whenever this subelement (the one on which this attribute is defined) becomes the target of an embedding. (Usually, this attribute needs to be defined on the `'root'` subelement of the cell, since that is the default target for the cell's container.) Expects a selector.

A change in the cell's container affects the following characteristics of the cell view:

• embedding highlighter

// `standard.Rectangle` has `root`, `body` and `label` subelements
const rect = new shapes.standard.Rectangle();
// we want to have the `label` on the outside and under the `body` of the rectangle:
rect.attr(['label'], { y: 'calc(h + 10)', textVerticalAnchor: 'top' });
// normally, when a user tries to embed a child to the rectangle,
// the `root` subelement would be highlighted (the wrapper of `body` and `label`)
// however, we want only the `body` to be highlighted,
// so we need to specify it as a proxy for `root`:
rect.attr(['root', 'containerSelector'], 'body');

cx

applies to: <circle/>, <ellipse/>

The same as the SVG cx attribute, but it can be a calc() expression.

{ cx: 'calc(w / 2)' }

cy

applies to: <circle/>, <ellipse/>

The same as the SVG cy attribute, but it can be a calc() expression.

{ cy: 'calc(h / 2)' }

d

applies to: <path/>

The same as the SVG d attribute, but it can be a calc() expression.

{ d: 'M 0 0 calc(w) 0 calc(h) 0 z' }

displayEmpty

applies to: <text/>

If set to true, the SVGTextElement with empty content will be rendered. It's useful when the text needs to be editable.

event

The event attribute makes the selected node and its descendants trigger an arbitrary event when clicked (mousedown/touchstart). This event is triggered on the view itself and the paper. The paper handler is called with the signature cellView, evt, x, y, while the cell view handler is called only with evt, x, y.

element.attr({
    image: {
        // pointerdown on the image SVG node will trigger the `element:delete` event
        event: 'element:delete',
        xlinkHref: 'trash.png'
        width: 20,
        height: 20
    }
});
// Binding handler to the event
paper.on('element:delete', function(elementView, evt) {
    // Stop any further actions with the element view e.g. dragging
    evt.stopPropagation();
    if (confirm('Are you sure you want to delete this element?')) {
        elementView.model.remove();
    }
});

fill

applies to: <circle/>, <ellipse/>, <path/>, <polygon/>, <polyline/>, <rect/>, <text/>

The fill attribute becomes a special attribute only in case it's defined as an object, instead of the usual SVG syntax (e.g. "#ffaabb"). If it's defined as an object, it is assumed to be either a gradient or pattern definition. It must have the form defined by the defineGradient() (resp. definePattern()) paper method.

Gradient

element.attr('rect/fill', {
    type: 'linearGradient',
    stops: [
        { offset: '0%', color: '#E67E22' },
        { offset: '20%', color: '#D35400' },
        { offset: '40%', color: '#E74C3C' },
        { offset: '60%', color: '#C0392B' },
        { offset: '80%', color: '#F39C12' }
    ]
});

Pattern

element.attr('rect/fill', {
    type: 'pattern',
    attrs: {
        width: 10,
        height: 10
    },
    markup: util.svg`<polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/>`
});

filter

The filter attribute becomes a special attribute only in case it's defined as an object, instead of the usual SVG syntax (e.g. "url(#myfilter)"). If it's defined as an object, it must have the form defined by the defineFilter() paper method.

element.attr('rect/filter', {
    name: 'dropShadow',
    args: {
        dx: 2,
        dy: 2,
        blur: 3
    }
});

height

applies to: <rect/>, <image/>, <foreignObject/>

The same as the SVG height attribute, but it can be a calc() expression.

{ height: 'calc(h + 10)' }

highlighterSelector

Designate another subelement of the cell as a proxy target for the cell's magnet, whenever this subelement (the one on which this attribute is defined) becomes the source/target of a link. (Usually, this attribute needs to be defined on the `'root'` subelement of the cell, since that is the default target for the cell's magnet.) Expects a selector.

A change in the cell's magnet affects the following characteristics of the cell view:

• magnet highlight

It has no effect on the connection validation and link model attributes.

// `standard.Rectangle` has `root`, `body` and `label` subelements
const rect = new shapes.standard.Rectangle();
// we want to have the `label` on the outside and under the `body` of the rectangle:
rect.attr(['label'], { y: 'calc(h + 10)', textVerticalAnchor: 'top' });
// normally, highlighters would appear around
// the `root` subelement (the wrapper of `body` and `label`)
// however, we want highlighters to highlight only to the `body` subelement,
// so we need to specify it as a proxy for `root`:
rect.attr(['root','highlighterSelector'], 'body');

html

note

Valid for HTML subelements (e.g a <div/> inside a <foreignObject/>).

The html attribute allows you to define an HTML content of the subelement. The value of the html attribute is a string representing serialized HTML content. The HTML content is rendered inside the subelement.

element.attr(['foreignObjectSelector', 'html'], '<div style="color: red">Hello, World!</div>');

magnet

When set to true, the subelement can become the source/target of a link during link reconnection. Useful for so called 'ports'. When set to magnet: 'passive', a new link won't be added to the graph when a user clicks on the respective magnet. This use case is common for the creation of 'input' ports.

const paper = new dia.Paper({
    // Other Paper options
    // The default behaviour of magnet validation
    validateMagnet: function(_cellView, magnet, _evt) {
        return magnet.getAttribute('magnet') !== 'passive';
    }
});

const portIn = {
    label: {
        // Label position and markup
    },
    attrs: {
        portBody: {
            // Other portBody attributes
            magnet: 'passive' // No link added upon user click
        },
        label: { text: 'port' }
    },
    markup: util.svg`<rect @selector="portBody"/>`
};

magnetSelector

Designate another subelement of the cell as a proxy target for the cell's magnet, whenever this subelement (the one on which this attribute is defined) becomes the source/target of a link. (Usually, this attribute needs to be defined on the `'root'` subelement of the cell, since that is the default target for the cell's magnet.) Expects a selector.

A change in the cell's magnet affects the following characteristics of the cell view:

• link anchor
• link connection point
• connector
• router

It has no effect on the connection validation, magnet highlighter and the source and target link model attributes.

// `standard.Rectangle` has `root`, `body` and `label` subelements
const rect = new shapes.standard.Rectangle();
// we want to have the `label` on the outside and under the `body` of the rectangle:
rect.attr(['label'], { y: 'calc(h + 10)', textVerticalAnchor: 'top' });
// normally, links would connect to the `root` subelement (the wrapper of `body` and `label`)
// however, we want links to connect only to the `body` subelement,
// so we need to specify it as a proxy for `root`:
rect.attr(['root','magnetSelector'], 'body');

points

applies to: <polyline/>, <polygon/>

The same as the SVG points attribute, but it can be a calc() expression.

{ points: '0,0 0,calc(h) calc(w),calc(h) calc(w),0' }

port

An object containing at least an id property. This property uniquely identifies the port. If a link gets connected to a magnet that has also a port object defined, the id property of the port object will be copied to the port property of the source/target of the link.

props

Special attribute for setting the properties of the HTMLElement. The value is not set as a node attribute, but using the DOM property.

element.attr('input', {
    props: { value: 'text', readonly: false },
    type: 'text',
    placeholder: 'Enter text'
});

props is an object with one or more of the following properties: value, checked, disabled, readOnly, contentEditable, multiple, selected, indeterminate.

For example, to set the content of the textarea element, use the following syntax:

element.attr('textarea/props/value', 'textarea content');

When setting a value of the select element, pass the value of the option element.

element.attr('select/props/value', 'option1');

For the select with multiple options, pass an array of values.

element.attr('select/props/value', ['option1', 'option2'], { rewrite: true });

r

applies to: <circle/>

The same as the SVG r attribute, but it can be a calc() expression.

{ r: 'calc(s / 2)' }

ref

info

Requires the paper to be in the render tree (e.g. not display: none).

JointJS needs to measure the size of the referenced element. If the referenced element is not in the render tree, the size cannot be measured and the relative attributes will not work as expected.

Using such attributes can affect the performance of the application. It is recommended to use them only when necessary.

A selector pointing to an element that is used as a reference for calculating relative size and position attributes.

If the ref attribute is not used, the bounding box of the reference used to calculate the relative position is the bounding box of the element model itself, i.e. el.getBBox() (which is sufficient in most cases).

refCx

warning

Deprecated. Use cx attribute in combination with calc() expression.

{ cx: 'calc(w / 2)' }

Set cx attribute of the subelement relatively to the width of the element referenced to by the selector in ref attribute. If the value is in the [0, 1] interval (or expressed in percentages, e.g. '80%'), the cx of the subelement will be set as a percentage of the width of the referenced element. If the value is <0 or >1, the height of the subelement will be smaller/bigger than the width of the referenced element by the amount specified. Note that this makes sense only for SVG elements that support rx and ry attributes, such as <ellipse>.

refCy

warning

Deprecated. Use cy attribute in combination with calc() expression.

{ cy: 'calc(h / 2)' }

Set cy attribute of the subelement relatively to the height of the element referenced to by the selector in ref attribute. If the value is in the [0, 1] interval (or expressed in percentages, e.g. '80%'), the cy of the subelement will be set as a percentage of the height of the referenced element. If the value is <0 or >1, the height of the subelement will be smaller/bigger than the height of the referenced element by the amount specified. Note that this makes sense only for SVG elements that support rx and ry attributes, such as <ellipse>.

refDKeepOffset

Set d attribute of the <path/> subelement relatively to the dimensions and position of the element referenced by the selector in the ref attribute. The refD path data is scaled so that the path's dimensions match the reference element's dimensions, and translated so that the path's origin matches the origin of the reference element.

The original path data offset is preserved. This means that if the top-left corner of the refD bounding box does not lie at 0,0, the gap between the path and origin is preserved in the rendered shape, as well.

const Path = dia.Element.define('examples.Path', {
    attrs: {
        path: {
            refDKeepOffset: 'M 10 10 30 10 30 30 z', // path offset is 10,10
            fill: 'red',
            stroke: 'black'
        }
    }
}, {
    markup: util.svg`<path @selector="path"/>`
});

const p = (new Path()).resize(40, 40).addTo(graph);
// the rendered path's `d` attribute will be 'M 10 10 50 10 50 50 z'
// can be obtained by `p.findView(paper).findNode('path').getAttribute('d');`

refDResetOffset

alias: refD

Set d attribute of the <path/> subelement relatively to the dimensions and position of the element referenced by the selector in the ref attribute. The refD path data is scaled so that the path's dimensions match the reference element's dimensions, and translated so that the path's origin matches the origin of the reference element.

The original path data offset is not preserved. This means that if the top-left corner of the refD bounding box does not lie at 0,0, the path is translated so that this gap disappears. The rendered path then fits perfectly into the reference element's bounding box.

const Path = dia.Element.define('examples.Path', {
    attrs: {
        path: {
            refDResetOffset: 'M 10 10 30 10 30 30 z', // path offset of 10,10 will be discarded
            fill: 'red',
            stroke: 'black'
        }
    }
}, {
    markup: util.svg`<path @selector="path"/>`
});

const p = (new Path()).resize(40, 40).addTo(graph);
// the rendered path's `d` attribute will be 'M 0 0 40 0 40 40 z'
// can be obtained by `p.findView(paper).findNode('path').getAttribute('d');`

refDx

warning

Deprecated. Use transform attribute in combination with calc() expression.

Make x-coordinate of the subelement relative to the right edge of the element referenced to by the selector in ref attribute.

refDy

warning

Deprecated. Use transform attribute in combination with calc() expression.

Make y-coordinate of the subelement relative to the bottom edge of the element referenced to by the selector in ref attribute.

refHeight

warning

Deprecated. Use height attribute in combination with calc() expression.

{ height: 'calc(h)' }

Set height of the subelement relatively to the height of the element referenced to by the selector in ref attribute. If the value is in the [0, 1] interval (or expressed in percentages, e.g. '80%'), the height of the subelement will be set as a percentage of the height of the referenced element. If the value is <0 or >1, the height of the subelement will be smaller/bigger than the height of the referenced element by the amount specified. Note that this makes sense only for SVG elements that support width and height attributes, such as <rect>.

refHeight2

warning

Deprecated. Use height attribute in combination with calc() expression.

Same as refHeight. Useful when one needs to resize an element absolutely and relatively at the same time. Note that all percentages are relative to 100% of the referenced height.

// resizes the element to 25% of the reference height
// (25% = 100% - 75%) plus extra 20 pixels
{ refHeight: 20, refHeight2: '-75%' }

refPointsKeepOffset

Set the points attribute of the <polygon> or <polyline> subelement relatively to the dimensions and position of the element referenced by the selector in the ref attribute. The refPoints are scaled so that the subelement's dimensions match the reference element's dimensions, and translated so that the their origin matches the origin of the reference element.

The original points offset is preserved. This means that if the top-left corner of the refPoints bounding box does not lie at 0,0, the gap between the points and origin is preserved in the rendered shape, as well.

const Polygon = dia.Element.define('examples.Polygon', {
    attrs: {
        polygon: {
            refPoints: '10,10 30,10 30,30', // points offset is 10,10
            fill: 'red',
            stroke: 'black'
        }
    }
}, {
    markup: util.svg`<polygon @selector="polygon"/>`
});

const p = (new Polygon()).resize(40, 40).addTo(graph);
// the rendered polygon's `points` attribute will be '10,10 50,10 50,50'
// can be obtained by `p.findView(paper).findNode('polygon').getAttribute('points');`

refPointsResetOffset

alias: refPoints

Set the points attribute of the <polygon> or <polyline> subelement relatively to the dimensions and position of the element referenced by the selector in the ref attribute. The refPoints are scaled so that the subelement's dimensions match the reference element's dimensions, and translated so that the their origin matches the origin of the reference element.

The original points offset is not preserved. This means that if the top-left corner of the refPoints bounding box does not lie at 0,0, the subelement is translated so that this gap disappears. The rendered subelement then fits perfectly into the reference element's bounding box.

const Polygon = dia.Element.define('examples.Polygon', {
    attrs: {
        polygon: {
            refPoints: '10,10 30,10 30,30', // points offset of 10,10 will be discarded
            fill: 'red',
            stroke: 'black'
        }
    }
}, {
    markup: util.svg`<polygon @selector="polygon"/>`
});

const p = (new Polygon()).resize(40, 40).addTo(graph);
// the rendered polygon's `points` attribute will be '0,0 40,0 40,40'
// can be obtained by `p.findView(paper).findNode('polygon').getAttribute('points');`

refRCircumscribed

warning

Deprecated. Use r attribute in combination with calc() expression.

{ r: 'calc(d)' }

Set the r attribute of the subelement relatively to the circumscribed size (length of the diagonal of the bounding box) of the element referenced by the selector in the ref attribute. If the value is in the [0, 1] interval (or expressed in percentages, e.g. '80%'), the r of the subelement will be set as a percentage of the size of the referenced element. If the value is <0 or >1, the size of the subelement will be smaller/bigger than the size of the referenced element by the amount specified. Note that this makes sense only for SVG elements that support r attribute, such as <circle>.

refRInscribed

alias: refR

warning

Deprecated. Use r attribute in combination with calc() expression.

{ r: 'calc(s / 2)' }

Set the r attribute of the subelement relatively to the inscribed size (width or height of the bounding box, whichever is smaller) of the element referenced by the selector in the ref attribute. If the value is in the [0, 1] interval (or expressed in percentages, e.g. '80%'), the r of the subelement will be set as a percentage of the size of the referenced element. If the value is <0 or >1, the size of the subelement will be smaller/bigger than the size of the referenced element by the amount specified. Note that this makes sense only for SVG elements that support r attribute, such as <circle>.

refRx

warning

Deprecated. Use rx attribute in combination with calc() expression.

{ rx: 'calc(w / 2)' }

Set rx attribute of the subelement relatively to the width of the element referenced to by the selector in ref attribute. If the value is in the [0, 1] interval (or expressed in percentages, e.g. '80%'), the rx of the subelement will be set as a percentage of the width of the referenced element. If the value is <0 or >1, the height of the subelement will be smaller/bigger than the width of the referenced element by the amount specified. Note that this makes sense only for SVG elements that support rx and ry attributes, such as <ellipse>.

refRy

warning

Deprecated. Use ry attribute in combination with calc() expression.

{ ry: 'calc(h / 2)' }

Set ry attribute of the subelement relatively to the height of the element referenced to by the selector in ref attribute. If the value is in the [0, 1] interval (or expressed in percentages, e.g. '80%'), the ry of the subelement will be set as a percentage of the height of the referenced element. If the value is <0 or >1, the height of the subelement will be smaller/bigger than the height of the referenced element by the amount specified. Note that this makes sense only for SVG elements that support rx and ry attributes, such as <ellipse>.

refWidth

warning

Deprecated. Use width attribute in combination with calc() expression.

Set width of the subelement relatively to the width of the element referenced to by the selector in ref attribute. If the value is in the [0, 1] interval (or expressed in percentages, e.g. '80%'), the width of the subelement will be set as a percentage of the width of the referenced element. If the value is <0 or >1, the width of the subelement will be smaller/bigger than the width of the referenced element by the amount specified. For example, 'ref-width': .75 sets the width of the subelement to 75% of the width of the referenced element. 'ref-width': 20 makes the width to be 20px less than the width of the referenced element. Note that this makes sense only for SVG elements that support width and height attributes, such as <rect>.

refWidth2

warning

Deprecated. Use width attribute in combination with calc() expression.

Same as refWidth. Useful when one needs to resize an element absolutely and relatively at the same time. Note that all percentages are relative to 100% of the referenced width.

// resizes the element to 25% of the reference width
// (25% = 100% - 75%) plus extra 20 pixels
{ refWidth: 20, refWidth2: '-75%' }

refX

warning

Deprecated. Use transform attribute in combination with calc() expression.

{ transform: 'translate(calc(w + 10), 0)' }

Make x-coordinate of the subelement relative to the x-coordinate of the element referenced to by the selector in ref attribute. If ref-x is in the (0,1) interval (or expressed in percentages, e.g. '80%'), the offset is calculated from the fraction of the bounding box of the referenced element. Otherwise, it is an absolute value in pixels.

refX2

warning

Deprecated. Use transform attribute in combination with calc() expression.

Same as refX. Useful when one needs to position an element absolutely and relatively at the same time.

// moves the element by 50% of the referenced width
// plus extra 20 pixels.
{ refX: '50%', refX2: 20 }

refY

warning

Deprecated. Use transform attribute in combination with calc() expression.

{ transform: 'translate(0, calc(h + 10))' }

Make y-coordinate of the subelement relative to the y-coordinate of the element referenced to by the selector in ref attribute. If ref-y is in the (0,1) interval (or expressed in percentages, e.g. '80%'), the offset is calculated from the fraction of the bounding box of the referenced element. Otherwise, it is an absolute value in pixels.

refY2

warning

Deprecated. Use transform attribute in combination with calc() expression.

Same as refY. Useful when one needs to position an element absolutely and relatively at the same time.

// moves the element by 50% of the referenced height
// plus extra 20 pixels.
{ refY: '50%', refY2: 20 }

resetOffset

info

Requires the paper to be in the render tree (e.g. not display: none). See the ref attribute for more information.

If set to true, the subelement offset (the distance from x0 y0 to the most top-left point) will be reset to x0 y0.

element.attr({
    path: {
        // The path bbox for `d="M 10 10 20 20"` is x10 y10 w10 h10.
        d: 'M 10 10 20 20',
        // The path bbox will be changed to x0 y0 w10 h10.
        // This has same effect as passing path with `d="M 0 0 10 10"`
        resetOffset: true
    }
});

rx

The same as the SVG rx attribute, but it can be a calc() expression.

{ rx: 'calc(w / 2)' }

ry

The same as the SVG ry attribute, but it can be a calc() expression.

{ ry: 'calc(h / 2)' }

sourceMarker

applies to: <circle/>, <ellipse/>, <line/>, <path/>, <polygon/>, <polyline/>, <rect/>

It draws an SVG element at the beginning of a path (the source of the link). The element is automatically rotated based on the path direction. It must have the form defined by the defineMarker() paper method.

link.attr('line/sourceMarker', {
    type: 'circle', // SVG Circle
    fill: '#666',
    stroke: '#333',
    r: 5, // radius of the circle
    cx: 5 // move the centre of the circle 5 pixels from the end of the path
});

stroke

The stroke attribute becomes a special attribute only in case it's defined as an object. This has the exact same behaviour as the fill attribute.

style

An object containing CSS styles for a subelement.

targetMarker

applies to: <circle/>, <ellipse/>, <line/>, <path/>, <polygon/>, <polyline/>, <rect/>

The same as sourceMarker but draws an SVG element at the end of the path. Note the coordinate system for drawing is rotated by 180 degrees for convenience (this allows to use the same marker for source and target and have them both face the connected elements).

text

applies to: <text/>

The text attribute contains the text that should be set on the subelement. If the provided string does not contain any newline characters ('\n'), the text is set directly as the content of the <text/> subelement. Alternatively, if the provided string has multiple lines, each line becomes the content of a <tspan/> child of the <text/> subelement.

If you need the text to be automatically wrapped inside the <text/> subelement, you should use the textWrap attribute instead. It can automatically add line breaks into the provided string as necessary, and mark them with newline characters.

textPath

applies to: <text/>

textPath can be either a string or an object.

• If it is a string:

  It specifies a path d attribute the text will be rendered along.

• If it is an object:

  Property	Type	Description
  d	string	The d attribute of a path the text will be rendered along.
  selector	string	A selector that targets an SVGPathElement within the shape.
  startOffset	string or number	The position of the text along the path (e.g. '50%', 20).

el.attr('labelSelector/textPath' { selector: 'pathSelector', startOffset: '50%' });

See the Vectorizer.text method for more details.

textVerticalAnchor

applies to: <text/>

The attribute is used to (top-, middle- or bottom-) align a text, relative to a point determined by reference to provided x, y, transform, and similar attributes. See the Vectorizer.text method for more details.

textWrap

applies to: <text/>

It enables the text wrapping for the text attribute (automatically breaks the lines to fit within the reference bounding box).

It expects an object with several optional properties.

width and height adjust the final size of the wrapped text.

• If not provided, the text is wrapped to fit the reference bounding box
• It can be a calc() expression (e.g. 'calc(w - 10)')
• Percentage expression (e.g. '50%' is half the width or height)
• A positive number is an absolute dimension (e.g 50 fits the text within 50 pixels)
• A negative number is a relative dimension (e.g. -10 is an equivalent to 'calc(w - 10)' resp. 'calc(h - 10)')
• Use null to disable wrapping in a given dimension

If the text cannot fit into the bounding box as specified, the overflowing words are cut off. If the ellipsis option is provided, an ellipsis string is inserted before the cutoff. If no words can fit into the bounding box at all, no text is inserted.

element1.attr('label', {
    text: 'Text to wrap.',
    textWrap: {
        width: 'calc(w - 10)', // reference width minus 10
        height: null // no height restriction
    }
});

element2.attr('label', {
    text: 'lorem ipsum dolor sit amet consectetur adipiscing elit',
    textWrap: {
        width: -10, // reference width minus 10
        height: '50%', // half of the reference height
        ellipsis: true // could also be a custom string, e.g. '...!?'
    }
});

For more info see util.breakText.

title

Add the text-only description in form of a <title> element to the associated node. The title is not rendered as part of the graphics, but it's displayed as a tooltip.

element.attr('rect/title', 'Description of the rectangle');

transform

The same as the SVG transform attribute, but it can be a calc() expression.

{ transform: 'translate(calc(w / 2), 0)' }

vertexMarker

applies to: <circle/>, <ellipse/>, <line/>, <path/>, <polygon/>, <polyline/>, <rect/>

The same as sourceMarker but draws SVG elements at every vertex of the path.

width

The same as the SVG width attribute, but it can be a calc() expression.

{ width: 'calc(w + 10)' }

x

applies to: <rect/>, <text/>, <image/>, <foreignObject/>

The same as the SVG x attribute, but it can be a calc() expression.

{ x: 'calc(w / 2)' }

xAlignment

info

Use the SVG text-anchor attribute for horizontal text alignment.

Requires the paper to be in the render tree (e.g. not display: none). See the ref attribute for more information.

If set to 'middle', the subelement will be centered around its new x-coordinate.

y

applies to: <rect/>, <text/>, <image/>, <foreignObject/>

The same as the SVG y attribute, but it can be a calc() expression.

{ y: 'calc(h / 2)' }

yAlignment

info

Use the textVerticalAnchor attribute for vertical text alignment.

Requires the paper to be in the render tree (e.g. not display: none). See the ref attribute for more information.

If set to 'middle', the subelement will be centered around its new y-coordinate.