SVG matrix

SVG matrix

HTML

<svg height = "400" width = "400">
<rect
   id="rect1"
   width="100"
   height="100"
   x="100"
   y="100" stroke="red" fill="none" />
<rect
   id="rect2"
   width="100"
   height="100"
   x="4.9038105"
   y="154.90381"
   transform="matrix(0.8660254,-0.5,0.5,0.8660254,110,10)" stroke="blue" fill="none" />
<rect
   id="rect3"
   width="100"
   height="100"
   x="100"
   y="100"
   transform="translate(150, 150) rotate(45) translate(-150, -150)" stroke="green" fill="none" />
</svg>

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
<div id="e"></div>
<div id="f"></div>

JavaScript

document.getElementById("a").innerHTML = "a=" + (document.getElementById("rect3").getCTM().a)
document.getElementById("b").innerHTML = "b=" + (document.getElementById("rect3").getCTM().b)
document.getElementById("c").innerHTML = "c=" + (document.getElementById("rect3").getCTM().c)
document.getElementById("d").innerHTML = "d=" + (document.getElementById("rect3").getCTM().d)
document.getElementById("e").innerHTML = "e=" + (document.getElementById("rect3").getCTM().e)
document.getElementById("f").innerHTML = "f=" + (document.getElementById("rect3").getCTM().f)