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

Question

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

这是我拥有的:http://jsfiddle.net/uhkwLuph/20/

现在我的问题是我需要将此效果应用于其他 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 元素并将在 :hover 上生长的 .fill circle 元素添加到所有图标。

您的 id 不是唯一的，我已将它们更改为 class。 id必须是唯一的。

Updated Fiddle

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

<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" class="icon">
  <g transform="translate(101,99)">
    <circle class="fill" r="0.1" />
  </g>
  <g class="container">
    <circle class="st0" cx="101" cy="99" r="89.333" />
  </g>
  <g class="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>
<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" class="icon">
  <g transform="translate(101,99)">
    <circle class="fill" r="0.1" />
  </g>
  <g class="Layer_1">
    <path class="st0" d="M247,180" />
  </g>
  <g class="icon_1_">
    <rect class="st0" x="45.25" y="71.5" class="st1" width="111.5" height="58" />
    <polyline class="st0" points="45.25,74.167 101,101.167 156.75,73.5 	" />
  </g>
  <g class="container">
    <circle class="st0" cx="101" cy="99" r="89.333" />
  </g>
</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" class="icon">
  <g transform="translate(101,99)">
    <circle class="fill" r="0.1" />
  </g>
  <g class="Layer_1" class="st5">
    <path class="h0" d="M247,180" />
  </g>
  <g class="icon_2_">
    <path class="st0" 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="st0" 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="st0" 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 class="container">
    <circle class="st0" cx="101" cy="99" r="89.333" />
  </g>
</svg>