element.resize(width, height [, opt])
Resize an element in place so that the "scalable" group has width width
and height height
. In place in this case means
that the top-left corner of the element stays at the same position after resizing. In other words,
the element is streched to the bottom/right (by default). To change the direction of resizing, set
opt.direction
to one of 'left'
, 'right'
, 'top'
, 'bottom'
,
'top-right'
, 'top-left'
, 'bottom-left'
or 'bottom-right'
(the default).
There is a difference between a classical scale and
resize operations. resize
doesn't actually scale the whole SVG <g>
element grouping
all its subelements. It only scales subelements of the <g class"scalable"/>
group. This is very
useful and brings a lot of flexibility in defining which subelements should be scaled and which not. Imagine a simple
rectangle element with text inside. Usually, when we resize the whole element, we expect the rectangle to
get scaled while the text should stay the same size, only its position should be adjusted so that the text stays
in the center of the rectangle. This can be easilly achieved by adding the <rect/>
element to the <g class"scalable"/>
group
in the markup and positioning the text
subelement relatively to the <rect />
element: <text ref-x=".5" ref-y=".5" ref="rect" />
.
Note that neither of ref-x, ref-y and ref
attributes is an SVG standard attribute. These are special
attributes introduced by JointJS. More on these in the section on Special attributes.