ManualTests/svg-css-transition-compound.html

   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>