悬停时更改SVG的笔触和填充颜色

Question

I have a SVG image that has a stroke around it that has the same color value of a filled icon. The icon rests on a background within the image. Here's my example: https://jsfiddle.net/o48629qs/

What I'm trying to accomplish is having the stroke around the hexagon be the same color as the icon when the item is hovered keeping the background of it black. My code is below. Not sure why it's not working since I'm requiring paths to change color when they are hovered.

HTML

 <svg class=“instagram” data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 445.33 500.72">
    <title>Untitled-9</title>
    <g id="border">
      <path d="M225.64,495.55a33.25,33.25,0,0,1-16.6-4.44L29.94,387.72A33.29,33.29,0,0,1,13.33,359V152.16a33.29,33.29,0,0,1,16.6-28.74L209,20a33.25,33.25,0,0,1,33.21,0l179.1,103.38a33.29,33.29,0,0,1,16.61,28.74V358.93a33.26,33.26,0,0,1-16.63,28.81L242.24,491.11A33.26,33.26,0,0,1,225.64,495.55Z"
      transform="translate(-2.97 -5.19)" style="fill:#141516" />
      <path d="M225.64,25.9A22.84,22.84,0,0,1,237.06,29l179.1,103.38a22.87,22.87,0,0,1,11.43,19.77V358.93a22.78,22.78,0,0,1-11.43,19.82L237.06,482.14a22.89,22.89,0,0,1-22.85,0L35.11,378.75A22.87,22.87,0,0,1,23.69,359V152.16a22.87,22.87,0,0,1,11.43-19.77L214.21,29a22.84,22.84,0,0,1,11.43-3.06m0-20.71A43.62,43.62,0,0,0,203.85,11L24.75,114.45A43.67,43.67,0,0,0,3,152.16V359a43.67,43.67,0,0,0,21.78,37.71l179.1,103.39a43.61,43.61,0,0,0,43.57,0L426.48,396.71a43.64,43.64,0,0,0,21.82-37.78V152.11a43.67,43.67,0,0,0-21.78-37.71L247.42,11a43.61,43.61,0,0,0-21.78-5.83h0Z"
      transform="translate(-2.97 -5.19)" style="fill:#ff0000" />
    </g>
    <path d="M275.94,173.55H175.33a31.73,31.73,0,0,0-31.69,31.69V305.86a31.73,31.73,0,0,0,31.69,31.69H275.94a31.73,31.73,0,0,0,31.69-31.69V205.24A31.73,31.73,0,0,0,275.94,173.55Zm9.09,18.9h3.62v27.8l-27.7.09-0.09-27.8Zm-82.8,46.27a28.82,28.82,0,1,1-5.46,16.83A28.84,28.84,0,0,1,202.23,238.71Zm89.43,67.14a15.73,15.73,0,0,1-15.72,15.71H175.33a15.73,15.73,0,0,1-15.72-15.71V238.71H184.1a44.85,44.85,0,1,0,83.08,0h24.49v67.14Z"
    transform="translate(-2.97 -5.19)" style="fill:#ff0000" />
  </svg>
</a>

CSS

 a svg {
   width: 6rem;
   height: 6rem;
   -webkit-transform: translate(0, 0);
   transform: translate(0, 0);
   transition: all 0.3s;
 }

 a svg:hover {
   -webkit-transform: translate(0, -10px);
   transform: translate(0, -10px);
 }

 a svg path#fill:hover {
   fill: #00ffff !important;
 }

Answer 1

This css should work for you (change the green to whichever color you choose)

 a svg:hover g path:last-child{
   fill: green !important;
 }

 a svg:hover g + path{
   fill: green !important;
 }

Forked you fiddle, here's a demo https://jsfiddle.net/iamnottony/gu2e9nf3/1/