Как расчитывать трансформацию одного объекта относительно другого?

Question

[Артём Щурин]

Пытаюсь расчитать смещение для группы svg объектов и положить их над исходным прямоугольником, чтобы группа не выходила за размеры прямоугольника и находилась по центру, родитель у группы элементов и прямоугольника общий общий.

А исходный он от того, что уже был в документе, а группу элементов подгружаю и вставляю в дерево.

Масштаб было расчитать лекго, а вот трансформации ввели в ступор, никак не могу добится центровки.
Привожу пример кода.

<svg>
		<g transform="translate(396.85,-130.759)">
			<g transform="matrix(1,0,0,1,0,0)"></g>
			<rect x="0" y="552.756" width="28.3465" height="42.5197" class="start-object"></rect>
			<g transform="translate(51.0442,-37.0855)" class="transform-object">
				<g transform="translate(47.0826,-46.7717)">
					<rect x="0" y="167.4" width="14.1732" height="75.1181"></rect>
				</g>
				<g transform="translate(47.0826,0)">
					<rect x="0" y="73.8569" width="14.1732" height="168.661"></rect>
				</g>
				<g transform="translate(271.884,151.101) rotate(90)">
					<rect x="0" y="192.912" width="14.1732" height="49.6063"></rect>
				</g>
			</g>
		</g>
	</svg>

var startObj = $('.start-object'), // Объект тносительно которого будем выравнивать
			tfmObj = $('.transform-object'), // Объект который будем выравнивать
			svg = $('svg'); 

		var tfmList = tfmObj[0].transform.baseVal, // трансформ лист смещаемого объекта
			startObj = startObj[0].getBBox(),
			tfmObjBBox = tfmObj[0].getBBox(),
			scale = {},
			tfmScale, tfmTranslate, startObjRect, tfmObjRect, offset;

		scale.width = startObj.width / tfmObjBBox.width;
		scale.height = startObj.height / tfmObjBBox.height;

		scale.result = scale.height < scale.width ? scale.height : scale.width;

		tfmScale = svg[0].createSVGTransform();
		tfmScale.setScale(scale.result, scale.result);
		tfmList.appendItem(tfmScale);

		startObjRect = startObj[0].getBoundingClientRect();
		tfmObjRect = tfmObj[0].getBoundingClientRect();

		offset.x = pr.left - sr.left + (pr.width - sr.width) / 2;
		offset.y = pr.top - sr.top + (pr.height - sr.height) / 2;

		tfmTranslate = svg[0].createSVGTransform();
		tfmTranslate.setTranslate(offset.x, offset.y);
		tfmList.appendItem(tfmTranslate);

		tfmList.consolidate();

html, body, svg{
			width: 100%;
			height: 100%;
		}
		body{
			margin: 0;
		}
		.start-object{
			fill: transparent;
			stroke: red;
		}