动画在悬停模式下填充SVG

Question

大家好，我正试图为我的SVG填充动画。

我想要的是，当我徘徊鼠标时，FILL将从底部到顶部填充整个圆圈。但我是堆栈如何使用CSS3 transfrom：scale属性来应用相同的。

作为示例，请查看此演示：http://tympanus.net/Tutorials/CircleHoverEffects/ 那个例子是CSS而不是SVG我需要在我的SVG上应用这个弹出式FILL效果。

到目前为止，这是我的代码：

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px"
     height="200px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" id="icon">

<style type="text/css">     
    .st0
    {
        fill:none;
        stroke:#F2F2F2;
        stroke-width:4;
        stroke-miterlimit:10;
    }

    #icon .st0{
        -webkit-transition: .5s;
    }

    #icon:hover .st0{ 
        fill: #ffffff;
        stroke: #1f8a4c;
        cursor: pointer;
    }       
</style>


<g id="container">
    <circle class="st0" cx="101" cy="99" r="89.333"/>
</g>

<g id="icon-details">
    <path class="st0" d="M146.899,134.202c3.856,4.702,2.772,11.963-2.418,16.218l0,0c-5.192,4.258-12.523,3.896-16.38-0.806
        l-30.004-36.594c-3.855-4.701-2.772-11.964,2.418-16.22l0,0c5.19-4.256,12.523-3.895,16.377,0.808L146.899,134.202z"/>
    <circle class="st0" cx="77.843" cy="72.434" r="33.331"/>
    <circle class="st0" cx="77.844" cy="72.434" r="22.343"/>
</g>

</svg>

查看JSFIDDLE：http://jsfiddle.net/uhkwLuph/2/

Answer 1

我提出了一个有趣但有效的解决方案。我们想要使用scale，但是初始填充大小应该是0（缩放0大小的元素什么都不做）。

但是，我们知道像素是一个像素，因此大小为0.1的像素的圆圈将不会呈现。因此，我们设置了初始＆＃34; fill＆＃34;圆的大小要小，然后按大的比例缩放：

<g id="fill-group" transform="translate(101, 99)">
    <circle class="fill" r="0.1" />
</g>

另请注意，我们在群组中使用transform属性，而不是像其他元素一样设置cx和cy，以便圆圈以正确的原点缩放。

然后CSS看起来像：

#icon .fill {
    -webkit-transition: .5s;
    fill: #ffffff;
}
#icon:hover .fill {
    -webkit-transform: scale(893, 893);
}

这是一个表示它的小提琴：http://jsfiddle.net/uhkwLuph/20/