How to move a shape in a SVG clip

Question

I guessing that I'm trying to do something that just not possible, so this is why I'd like to do : http://codepen.io/anon/pen/doZpRJ

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

Here is my code

<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">
<defs>
    <clipPath id="clip-shape">
        <rect x="10" y="20" width="100" height="50" />
    </clipPath>
</defs>
<g>
    <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"/>
</g>

And my little JS

    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"});

});

You can see the code "working" here :

http://codepen.io/anon/pen/rVYMRm

Cheers,

Answer 1

Just put the clip path on the parent group.

<g style="clip-path: url(#clip-shape);">
    <path id="sha-shape" style="fill:#FF0000;" .../>

http://codepen.io/anon/pen/GJONNV