1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
6 <title>Matrix testing</title>
7 <style type="text/css" media="screen">
9 -webkit-box-sizing: border-box;
14 display: inline-block;
22 background-color: silver;
23 border: 1px solid black;
32 border: 1px dotted black;
33 -webkit-transform-origin: top left; /* to match SVG */
37 border: 1px solid blue;
41 <script type="text/javascript" charset="utf-8">
51 var matrixDiv = document.getElementById('matrixed');
53 var firstMatrix = new WebKitCSSMatrix(document.getElementById('box1').style.transform);
54 var secondMatrix = new WebKitCSSMatrix(document.getElementById('box2').style.transform);
55 var thirdMatrix = new WebKitCSSMatrix(document.getElementById('box3').style.transform);
57 var finalMatrix = firstMatrix.multiply(secondMatrix);
58 finalMatrix = finalMatrix.multiply(thirdMatrix);
61 // var finalMatrix = thirdMatrix.multiply(secondMatrix);
62 // finalMatrix = finalMatrix.multiply(firstMatrix);
64 matrixDiv.style.transform = finalMatrix;
69 var matrixDiv = document.getElementById('matrix-svg');
71 var svgroot = document.getElementsByTagName('svg')[0];
73 var firstMatrix = svgroot.createSVGMatrix();
74 firstMatrix = firstMatrix.translate(75, 25);
75 var secondMatrix = svgroot.createSVGMatrix();
76 secondMatrix = secondMatrix.scale(2);
77 var thirdMatrix = svgroot.createSVGMatrix();
78 thirdMatrix = thirdMatrix.rotate(45);
80 var finalMatrix = firstMatrix.multiply(secondMatrix);
81 finalMatrix = finalMatrix.multiply(thirdMatrix);
83 var matrixString = "matrix(" + finalMatrix.a + " " + finalMatrix.b +
84 " " + finalMatrix.c + " " + finalMatrix.d + " " + finalMatrix.e + " "
85 + finalMatrix.f + ")";
86 matrixDiv.setAttribute("transform", matrixString);
89 window.addEventListener('load', doTest, false)
97 <div class="container">
98 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
99 viewBox="0 0 200 200" style="width:200px; height:200px;">
100 <g id="group1" x="0" y="0" width="60" height="60" transform="translate(75, 25)">
101 <rect x="0" y="0" width="60" height="60" stroke="black" stroke-width="1px" stroke-dasharray="1 1" fill="none" />
102 <g id="group2" x="0" y="0" width="60" height="60" transform="scale(2)" >
103 <rect x="0" y="0" width="60" height="60" stroke="black" stroke-dasharray="1 1" stroke-width="1px" fill="none" />
104 <rect id="group3" x="0" y="0" width="60" height="60" stroke="blue" fill="none" transform="rotate(45)" />
111 <div class="container">
112 <div id="box1" class="box" style="transform: translate(75px, 25px)">
113 <div id="box2" class="box" style="transform: scale(2)">
114 <div id="box3" class="final box" style="transform: rotate(45deg)">
122 <h2>SVG compound</h2>
123 <div class="container">
124 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
125 viewBox="0 0 200 200" style="width:200px; height:200px;">
126 <rect x="0" y="0" width="60" height="60" stroke="blue" fill="none" transform="translate(75, 25) scale(2) rotate(45)">
131 <h2>CSS compound</h2>
132 <div class="container">
133 <div class="final box" style="transform: translate(75px, 25px) scale(2) rotate(45deg)">
140 <div class="container">
141 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
142 viewBox="0 0 200 200" style="width:200px; height:200px;">
143 <rect id="matrix-svg" x="0" y="0" width="60" height="60" stroke="blue" fill="none">
149 <div class="container">
150 <div id="matrixed" class="final box">