SVGTransform内に用意されているmatrixの値を直接操作することで、SVGにもととも用意されている
rotate()、translate()、scale()などの命令と同等の処理を行います。

注意：何か処理をしたあと、ほかのボタンを押すと、意図した動作にならないときがあります。
（matrixに前の計算につかった値が残っている模様）
既存の命令で対応できる場合は無理にmatrixをいじらないほうが手っ取り早くてお勧めかもしれません。

なお、console.log()にてSVGTransformなどを出力しているので興味のあるかたはブラウザの開発ツールなどでごらんください。
↓以下が実際のソースサンプルです。

▼JavaScript

<script>
	//	svgの要素を取得
	var SVG_1 = document.getElementById("box_1");
	console.log(SVG_1);
	//	svgにSVGTransformを生成する
	var Transform = SVG_1.createSVGTransform();
	console.log(Transform);
	//	生成されたTransform内のmatrixオブジェクトをMatrixに参照
	var Matrix = Transform.matrix;
	console.log(Matrix);
	//	今回は特に使わないですがx,y,height,widthが取得できるgetBBoxをメモ
	console.log(SVG_1.getBBox());

	var Group_1 = document.getElementById("g_1");
	var box1=(	SVG_1.getBBox());

function M_rotate(deg){
	Group_1.transform.baseVal.appendItem(Transform);
	var rad=deg/180*Math.PI;
	cos_r=Math.cos(rad);
	sin_r=Math.sin(rad);
	Matrix.a=cos_r;
	Matrix.c=-sin_r;
	Matrix.e=0;
	Matrix.b=sin_r;
	Matrix.d=cos_r;
	Matrix.f=0;
console.log(Transform);
}

function M_translate(x,y){
	Group_1.transform.baseVal.appendItem(Transform);
	Matrix.a=1;
	Matrix.c=0;
	Matrix.e=x;
	Matrix.b=0;
	Matrix.d=1;
	Matrix.f=y;
}

function M_scale_origin(x,y){
	Group_1.transform.baseVal.appendItem(Transform);
	Matrix.a=x;
	Matrix.c=0;
	Matrix.e=0;
	Matrix.b=0;
	Matrix.d=y;
	Matrix.f=0;
}
</script>

▼CSS

▼HTML

デモページは、こちら