1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 4 <html lang="en"> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 7 <title>CSS Transition of SVG elements</title> 8 9 <style type="text/css" media="screen"> 10 div { 11 -webkit-box-sizing: border-box; 12 } 13 14 .column { 15 margin: 10px; 16 display: inline-block; 17 vertical-align: top; 18 } 19 .container { 20 position: relative; 21 height: 200px; 22 width: 200px; 23 margin: 10px; 24 background-color: silver; 25 border: 1px solid black; 26 } 27 28 .box { 29 position: absolute; 30 top: 0; 31 left: 0; 32 height: 60px; 33 width: 60px; 34 border: 1px dotted black; 35 -webkit-transform-origin: top left; /* to match SVG */ 36 } 37 38 .final { 39 border: 1px solid blue; 40 } 41 42 #target, #ref { 43 -webkit-transition-property: -webkit-transform; 44 -webkit-transition-duration: 1s; 45 } 46 </style> 47 48 <script type="text/javascript" charset="utf-8"> 49 var flag = true; 50 51 function transition() { 52 var svgElm = document.getElementById("target"); 53 var divElm = document.getElementById("ref"); 54 55 if (flag) { 56 svgElm.style.webkitTransform = "translate(75px, 25px) scale(2) rotate(45deg)"; 57 divElm.style.webkitTransform = "translate(75px, 25px) scale(2) rotate(45deg)"; 58 } 59 else { 60 svgElm.style.webkitTransform = "translate(0px, 0px) scale(1) rotate(0deg)"; 61 divElm.style.webkitTransform = "translate(0px, 0px) scale(1) rotate(0deg)"; 62 } 63 flag = !flag; 64 } 65 </script> 66 </head> 67 <body> 68 <h1>CSS Transition of "-webkit-trasform" property for SVG elements</h1> 69 70 <p>The element below should transition when button is clicked</p> 71 <p>The SVG transition should be identical with the CSS one</p> 72 73 <input type="button" value="Transition" onclick="transition()" /> 74 75 <div class="column"> 76 <h2>SVG compound</h2> 77 <div class="container"> 78 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" 79 viewBox="0 0 200 200" style="width:200px; height:200px;"> 80 <rect id="target" x="0" y="0" width="60" height="60" stroke="blue" fill="none"> 81 </rect> 82 </svg> 83 </div> 84 85 <h2>CSS compound</h2> 86 <div class="container"> 87 <div class="final box" id="ref"> 88 </div> 89 </div> 90 </div> 91 92 </body> 93 </html>
