title: How to move a shape in a SVG clip
body: <p>I guessing that I'm trying to do something that just not possible, so this is why I'd like to do :
  <a href="http://codepen.io/anon/pen/doZpRJ" rel="nofollow">http://codepen.io/anon/pen/doZpRJ</a></p>
  
  <p>So I tested multiple way to try to do that, like create a clip shape with a height to 0. But the problem is that I want to make it appear from the bottom.
  My first attempt was to create a clip shape and to translate the "SHA" from outside the clip shap to inside.
  But this is not working, there is like no "overflow: hidden" effect </p>
  
  <p>Here is my code</p>
  
  <pre><code>&lt;svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   width="180px" height="180px" viewBox="0 0 180 180" style="enable-background:new 0 0 180 180;" xml:space="preserve"&gt;
  &lt;defs&gt;
      &lt;clipPath id="clip-shape"&gt;
          &lt;rect x="10" y="20" width="100" height="50" /&gt;
      &lt;/clipPath&gt;
  &lt;/defs&gt;
  &lt;g&gt;
      &lt;path id="sha-shape" style="fill:#FF0000; clip-path: url(#clip-shape);" d="M137.48,44.615c-3.143,0-5.719,2.533-5.719,5.721c0,1.97,1.031,3.658,2.531,4.69l-0.609,1.267
      c-0.234,0.469-0.33,0.938-0.33,1.454c0,1.594,1.361,3.235,3.238,3.235c1.219,0,2.344-0.703,2.906-1.829l3.096-6.378
      c0.375-0.703,0.607-1.595,0.607-2.438C143.201,47.148,140.576,44.615,137.48,44.615 M123.977,50.666l-1.172-2.486
      c-1.08-2.298-3.189-3.611-5.441-3.611c-2.344,0-4.033,1.36-4.922,3.142l-10.693,21.807c-0.422,0.844-0.609,1.829-0.609,2.72
      c0,2.908,2.156,5.768,5.486,5.768c2.203,0,4.361-1.36,5.486-3.611L123.977,50.666z M133.59,72.237c0-0.892-0.236-1.829-0.656-2.72
      L124.82,52.4l-9.848,19.837h6.613l1.031,2.157c1.078,2.25,3.281,3.611,5.486,3.611c3.328,0,5.439-2.86,5.439-5.768H133.59z
       M80.083,72.284V50.29c0-3.142-2.577-5.721-5.72-5.721c-3.143,0-5.674,2.58-5.674,5.721v21.994c0,3.189,2.532,5.721,5.674,5.721
      C77.505,78.005,80.083,75.473,80.083,72.284 M98.325,72.284V50.29c0-3.142-2.532-5.721-5.72-5.721c-3.143,0-5.675,2.58-5.675,5.721
      v5.673h-5.159V66.61h5.159v5.674c0,3.189,2.532,5.721,5.675,5.721C95.793,78.005,98.325,75.473,98.325,72.284 M53.025,67.782
      l-5.909-2.485c-0.468-0.188-0.938-0.33-1.453-0.33c-2.297,0-3.846,2.159-3.846,4.361c0,5.348,6.519,8.583,11.208,8.676V67.782z
       M53.025,64.874V44.569c-5.674,0-10.55,4.409-10.55,10.316c0,3.283,1.359,6.19,4.547,7.503L53.025,64.874z M54.714,78.005
      c6.283-0.188,11.067-4.455,11.067-10.833c0-7.128-4.737-8.722-11.067-11.067V78.005z M54.714,53.432l4.501,1.688
      c0.469,0.141,0.891,0.234,1.407,0.234c2.298,0,3.752-1.688,3.752-3.892c0-4.689-5.816-6.8-9.661-6.894V53.432z"/&gt;
  &lt;/g&gt;
  </code></pre>
  
  <p></p>
  
  <p>And my little JS</p>
  
  <pre><code>    var shaShape = $('#sha-shape');
  
  TweenLite.set(shaShape, {css: {y: "40px"}});
  
  $('svg').hover(function() {
  
      TweenLite.to(shaShape, .35, {y: "0px"});
  
  }, function() {
  
      TweenLite.to(shaShape, .35, {y: "40px"});
  
  });
  </code></pre>
  
  <p>You can see the code "working" here :</p>
  
  <p><a href="http://codepen.io/anon/pen/rVYMRm" rel="nofollow">http://codepen.io/anon/pen/rVYMRm</a></p>
  
  <p>Cheers,</p>