Rotate Element at Center - jointjs

Question

I am trying to build a custom shape - a diamond that stays centered over the text in its label (bonus if we can make the shape expand as the label changes).
Right now, I am transforming a rectangle by 45 degrees to create the diamond. Problem is this seems to rotate around to top left corner and not the center point.
How can I make JointJS rotate this shape around it's center? Or is there a better way to accomplish this?
Here is a JSFiddle.
http://jsfiddle.net/dfqpbLyn/3/
var baseRhombus = joint.shapes.standard.Rectangle.define('crt.BaseRhombus',
{
attrs: {
label: {
textAnchor: 'middle',
textVerticalAnchor: 'middle',
fontSize: 25,
text: 'Test'
},
body: {
strokeWidth: 1,
stroke: 'green',
fill: 'gray',
//transform-origin: center center,
transform: 'rotate(45, center, center)',
}
}
},
{
markup:
[
{
tagName: 'rect',
selector: 'body'
},
{
tagName: 'text',
selector: 'label'
}
]
},
{
initialize: function (width, height, x, y) {
var newElement = new this({
id: 'g1',
position: {x:x, y:y},
size: {width: width, height: height},
//position: { x: x, y: y },
});
return newElement;
}
}
);
var baseRhombus = joint.shapes.crt.BaseRhombus.initialize(250, 250, 60, 50);
Thanks!
Will

Answer 1

Figured it out. Used
transform: 'rotate(45, 50, 50) on the body of my element, but calculated the transform origin based on the current width and height of the element. The documentation around transform was a bit difficult to find but once I found an example of it in use it became clear.