title: SVG g element height with css transition
body: <p>I am stuck with an issue. my goal is to create a blinking eye in svg. I created the graphic converted into svg. Now i planned to put a css animation on it so it looks like its blinking. I spent lot of time on it but not able to solve the issue.</p>
  
  <p>my approach to achieve this effect is to change its g element height with css transition so it will looks like blinking but when i put css on it it just disappear :( below is the css code I used:</p>
  
  <pre><code>#svg_7 path{
      transform:scale(0, -1);
      -webkit-transform:scale(0, -1);
  }
  </code></pre>
  
  <p><strong>svg code</strong></p>
  
  <pre><code>&lt;g id="svg_7"&gt;
   &lt;path id="svg_8" d="m35.99502,49.21692c-11.88306,0 -22.25696,5.59302 -27.80701,13.90399c5.55103,8.31104 15.92505,13.90302 27.80701,13.90302c11.88306,0 22.25696,-5.59198 27.80896,-13.90302c-5.55299,-8.31097 -15.92701,-13.90399 -27.80896,-13.90399z" stroke-miterlimit="10" stroke-width="1.4434" stroke="#fa5400" fill="transparent" /&gt;
   &lt;circle id="svg_9" r="9.83801" cy="63.12191" cx="35.995" stroke-miterlimit="10" stroke-width="1.4434" stroke="#fa5400" fill="transparent" /&gt;
  </code></pre>
  
  <p></p>
  
  <p>Main purpose is to create a blinking eye that keeps blinking after every few seconds. please do suggest me a solution. even we can use js/jquery if required.</p>
  
  <p><strong><a href="http://jsfiddle.net/kaxmiller/0tu0um8q/" rel="nofollow">jsfiddle link</a></strong></p>
  
  <p>thanks in advance 
  Kax</p>