如何svg在按钮单击时实现平滑填充。
这是一个例子，右边是一个正方形的例子，我也希望它与svg，但我不知道如何实现它：
$('.click-btn').click(function() {
$('.for-example').toggleClass('active');
});.s-tc-svg {
width: 150px;
height: 150px;
display: inline-block;
}
.example {
width: 150px;
height: 150px;
display: inline-block;
background: green;
position: relative;
overflow: hidden;
}
.for-example {
position: absolute;
top: -75px;
width: 150px;
height: 75px;
background: yellow;
transition: all 1.5s ease;
}
.for-example.active {
top: 0px;
}
.click-btn {
color: yelllow;
display: inline-block;
cursor: pointer;
border: 1px solid brown;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="s-tc-svg">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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" viewBox="0 0 238 158" style="enable-background:new 0 0 238 158;" xml:space="preserve">
<style type="text/css">
.st000{fill:#91979F;}
.st111{font-family:'EtelkaProLight';}
.st222{font-size:190px;}
.st333{filter:url(#Adobe_OpacityMaskFilter);}
.st444{mask:url(#SVGID_1_);}
.st555{fill:#C1C5CB;}
</style>
<g>
<text transform="matrix(1 0 0 1 1 145)" class="st000 st111 st222">60</text>
</g>
<defs>
<filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="1" y="-16.2" width="236.2" height="210.5">
<feFlood style="flood-color:white;flood-opacity:1" result="back"/>
<feBlend in="SourceGraphic" in2="back" mode="normal"/>
</filter>
</defs>
<mask maskUnits="userSpaceOnUse" x="1" y="-16.2" width="236.2" height="210.5" id="SVGID_1_">
<g class="st333">
<polygon points="32,153 218,-11 267,-9 246,173 113,210 22,158 "/>
</g>
</mask>
<g class="st444">
<g>
<text transform="matrix(1 0 0 1 1 145)" class="st555 st111 st222">60</text>
</g>
</g>
</svg>
</div>
<div class="example">
<div class="for-example"></div>
</div>
<span class="click-btn">Нажми на меня</span>我试图将svg它分成两部分并玩弄overflow: hidden;定位，但它几乎没有用：
.container {
position: relative;
height: 131px;
width: 186px;
overflow: hidden;
}
.svg-1 {
position: absolute;
top: -17px;
width: 238px;
height: 158px;
z-index: 1;
vertical-align: top;
}
.svg-2 {
position: absolute;
top: -17px;
width: 238px;
height: 158px;
vertical-align: top;
}<div class="container">
<div class="svg-1">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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" viewBox="0 0 238 158" style="enable-background:new 0 0 238 158;" xml:space="preserve">
<style type="text/css">
.st000{fill:#91979F;}
.st111{font-family:'EtelkaProLight';}
.st222{font-size:190px;}
.st333{filter:url(#Adobe_OpacityMaskFilter);}
.st444{mask:url(#SVGID_1_);}
.st555{fill:#C1C5CB;}
</style>
<defs>
<filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="1" y="-16.2" width="236.2" height="210.5">
<feFlood style="flood-color:white;flood-opacity:1" result="back"/>
<feBlend in="SourceGraphic" in2="back" mode="normal"/>
</filter>
</defs>
<mask maskUnits="userSpaceOnUse" x="1" y="-16.2" width="236.2" height="210.5" id="SVGID_1_">
<g class="st333">
<polygon points="32,153 218,-11 267,-9 246,173 113,210 22,158 "/>
</g>
</mask>
<g class="st444">
<g>
<text transform="matrix(1 0 0 1 1 145)" class="st555 st111 st222">60</text>
</g>
</g>
</svg>
</div>
<div class="svg-2">
<div class="s-tc-svg">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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" viewBox="0 0 238 158" style="enable-background:new 0 0 238 158;" xml:space="preserve">
<style type="text/css">
.st00{fill:#91979F;}
.st11{font-family:'EtelkaProLight';}
.st22{font-size:190px;}
.st33{filter:url(#Adobe_OpacityMaskFilter);}
.st44{mask:url(#SVGID_1_);}
.st55{fill:#C1C5CB;}
</style>
<g>
<text transform="matrix(1 0 0 1 1 145)" class="st000 st111 st222">60</text>
</g>
<defs>
<filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="1" y="-16.2" width="236.2" height="210.5">
<feFlood style="flood-color:white;flood-opacity:1" result="back"/>
<feBlend in="SourceGraphic" in2="back" mode="normal"/>
</filter>
</defs>
<mask maskUnits="userSpaceOnUse" x="1" y="-16.2" width="236.2" height="210.5" id="SVGID_1_">
<g class="st333">
<polygon points="32,153 218,-11 267,-9 246,173 113,210 22,158 "/>
</g>
</mask>
</svg>
</div>
</div>
</div>
在各种网站的帮助和对他们的帮助下，这就是我想出的。