html - 在悬停模式下动画填充 SVG

Question

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

我想要的是，当我将鼠标悬停时，FILL 将从下到上填充整个圆圈。但我正在研究如何使用 CSS3 transfrom: scale 属性应用相同的内容。

例如查看此演示:http://tympanus.net/Tutorials/CircleHoverEffects/该示例是 CSS 而不是 SVG 我需要在我的 SVG 上应用此弹出式填充效果。

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

    <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 像素的圆将不会呈现。因此，我们将初始“填充”圆的大小设置为较小，然后按较大比例缩放:

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

这里有一个 Fiddle 来展示它:http://jsfiddle.net/uhkwLuph/20/