Question

我是SVG的新手，我正在尝试在其他两个图标上应用我的第一个悬停效果图标。

现在我的问题是我需要在其他2个图标上应用此效果，但由于某种原因我陷入困境并无法解决。出于某种原因，它不会起作用。

这是我拥有的svg代码文件。

<!---ICON LIST--->

<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">
<style type="text/css">

    .st0{display:inline;fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
    .st1{display:inline;fill:none;stroke:#E6E6E6;stroke-width:4;stroke-miterlimit:10;}
    .st2{fill:none;stroke:#E6E6E6;stroke-width:4;stroke-miterlimit:10;}
    .st3{display:inline;fill:none;stroke:#F2F2F2;stroke-width:4;stroke-miterlimit:10;}
    .st4{fill:none;stroke:#F2F2F2;stroke-width:4;stroke-miterlimit:10;}


</style>
<g id="Layer_1" class="st5">
    <path class="st0" d="M247,180"/>
</g>
<g id="icon_2_">
    <path class="st2" d="M155.5,70.5c0,5.799-4.701,10.5-10.5,10.5H55.5C49.701,81,45,76.299,45,70.5l0,0C45,64.701,49.701,60,55.5,60
        H145C150.799,60,155.5,64.701,155.5,70.5L155.5,70.5z"/>
    <path class="st2" d="M155.5,100.5c0,5.799-4.701,10.5-10.5,10.5H55.5c-5.799,0-10.5-4.701-10.5-10.5l0,0
        C45,94.701,49.701,90,55.5,90H145C150.799,90,155.5,94.701,155.5,100.5L155.5,100.5z"/>
    <path class="st2" d="M155.5,130.5c0,5.799-4.701,10.5-10.5,10.5H55.5c-5.799,0-10.5-4.701-10.5-10.5l0,0
        c0-5.799,4.701-10.5,10.5-10.5H145C150.799,120,155.5,124.701,155.5,130.5L155.5,130.5z"/>
</g>
<g id="icon_1_" class="st5">
    <rect x="45.25" y="71.5" class="st1" width="111.5" height="58"/>
    <polyline class="st1" points="45.25,74.167 101,101.167 156.75,73.5  "/>
</g>
<g id="container">
    <circle class="st4" cx="101" cy="99" r="89.333"/>
</g>
<g id="icon" class="st5">
    <path class="st3" 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="st3" cx="77.843" cy="72.434" r="33.331"/>
    <circle class="st3" cx="77.844" cy="72.434" r="22.343"/>
</g>
</svg>



<!---ICON ENVELOPE --->


<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="icon2">

<style type="text/css">


    .st2{display:inline;fill:none;stroke:#F2F2F2;stroke-width:4;stroke-miterlimit:10;}
    .st3{fill:none;stroke:#ffffff;stroke-width:4;stroke-miterlimit:10;}


</style>




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

<g id="icon" class="st4">
    <path class="st2" 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="st2" cx="77.843" cy="72.434" r="33.331"/>
    <circle class="st2" cx="77.844" cy="72.434" r="22.343"/>
</g>
</svg>

你可以在这里检查这两个的JSFIDDLE： http://jsfiddle.net/21at30qm/ - 列表图标 http://jsfiddle.net/fnq0zwsu/ - 信封图标

提前致谢。

Answer 1

您必须将课程st0应用于所有path，circle，polygon和rect元素并添加.fill {{ 1}}在circle上增长到所有图标的元素。

您有:hover个不唯一的内容，我已将其更改为id个。 class必须是独一无二的。

的 Updated Fiddle

id

body { background: #27ae60; } .st0 { fill: none; stroke: #F2F2F2; stroke-width: 4; stroke-miterlimit: 10; } .icon .st0 { -webkit-transition: .5s; transition: .5s; } .icon .fill { -webkit-transition: .5s; transition: .5s; fill: #ffffff; } .icon:hover { cursor: pointer; } .icon:hover .st0 { stroke: #1f8a4c; } .icon:hover .fill { -webkit-transform: scale(893, 893); transform: scale(893, 893); }

使用2个SVG图标应用类似的填充效果

1 个答案: