SVG clipping attempt 2

by fezec

HTML

<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"
 xml:space="preserve" width="85" height="25" viewBox="0 0 85 25"
preserveAspectRatio='xMinYMin meet'
>    
        <g id="pill" onmousedown="down(this)" onmouseup="up(this)">
    <path id="outline" fill="#FFCCCC" d="M79.28,0H5.67C2.54,0,0,2.45,0,5.46v9.8c0,3.02,2.54,5.46,5.67,5.46h73.61c3.13,0,5.67-2.45,5.67-5.46v-9.8
	C84.95,2.45,82.41,0,79.28,0z M78.31,12.51c0,1.48-2.16,2.69-4.83,2.69H10.83c-2.67,0-4.83-1.2-4.83-2.69V7.69C6,6.2,8.16,5,10.83,5	h62.66c2.67,0,4.83,1.2,4.83,2.69V12.51z"/> 
    <defs id="clip">
        <clipPath id="masker">
    <rect x="0" y="0" width="150" height="150" style="fill:#ff0000" transform="translate(0,-30) rotate(45)" />
        </clipPath>
    </defs>
     <path fill="#FF0000" d="M79.28,0H5.67C2.54,0,0,2.45,0,5.46v9.8c0,3.02,2.54,5.46,5.67,5.46h73.61c3.13,0,5.67-2.45,5.67-5.46v-9.8
	C84.95,2.45,82.41,0,79.28,0z M78.31,12.51c0,1.48-2.16,2.69-4.83,2.69H10.83c-2.67,0-4.83-1.2-4.83-2.69V7.69C6,6.2,8.16,5,10.83,5	h62.66c2.67,0,4.83,1.2,4.83,2.69V12.51z" style="clip-path: url(#masker)" x="0" y="0" width="85" height="25" />
        </g>
    
   
</svg>


<div class="svg-holder">
    <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"
 xml:space="preserve" width="85" height="25" viewBox="0 0 85 25"
preserveAspectRatio='xMinYMin meet'
>    
    <use xlink:href="#pill"/>
    </svg>
</div>

CSS

svg{
  cursor:pointer;
    width:100%;
    height:100%;
}
body{
background-color:blue;
}


div{
    width:90%;
    height:100px;
    background:green;
}

.small{
    width:15%;
    height:auto;
}

JavaScript

down=function(e){
var mIn=e.getElementsByTagName("path")[0];
  
    animate(100,mIn);
}
up=function(e){
var mIn=e.getElementsByTagName("path")[0];
    animate(0,mIn);
}



function animate(p,elem){
$(elem).stop().animate({percent:p},{
  duration:450,step:function(a){
 var tween=a*.90;
    elem.setAttribute('transform', 'translate('+tween+')');
}
});
}