-1

I'm trying to get this SVG file to work as a link that changes color when hovered over, (ideally change to a different SVG file that would be the same size and shape). But I want the whole SVG to change colors when hovered over. Not the individual sections. I have 2 examples. One where I couldn't get the anchor to work without the background being selected, and one where it's not an anchor but changes colors only when the SVG is selected.

I was thinking it might be something with a <g> tag but wasn't sure. I'm still fairly new to using SVG images and coding in general.

Any assistance would be greatly appreciated.

.st2 {
  fill: #A72C2A;
}

.st2:hover {
  fill: black;
}
<div>
  <a href="va.html">
    <svg version="1.1" class="va" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 134.1 74" style="enable-background:new 0 0 134.1 74;" xml:space="preserve">
<polygon class="st2" points="133.7,19.4 133.7,19.4 132.6,22.2 133.1,23.3 133.5,22.2 134.1,20 134,20.1 "/>
<polygon class="st2" points="127.7,22.5 127.1,22 126.7,22.9 127.4,23.2 127.2,25.1 126.7,24.6 125.4,25.6 126.4,26 124.6,30.4 
    124.7,38.5 126.6,41.6 127.1,40.1 127.5,37.4 127.2,35.1 127.9,34.2 127.7,32.8 128.9,32.2 128.3,31.7 128.8,31 129.6,32.1 
    129.4,33.2 129,37.1 130.1,34.9 130.5,31.8 130.6,28.8 130.3,26.8 130.9,24.5 132,22.7 132.1,20.5 132.1,20.5 128.2,21.8 "/>
<polygon class="st2" points="99.1,10.6 99.7,10 100,8.6 99.8,8.2 99.9,7.7 99.8,7.3 99.4,7.1 99.1,7 98.4,6.5 98.9,5.9 98.9,5.9 
    98.4,6.4 98,6 97.2,6 96.3,5.9 95.5,5 95.5,4.8 94.7,4.5 94,4.8 92.4,4.6 91.6,3.8 90.9,3.5 90.5,2.1 91.2,1.2 90.4,1.1 89.4,0.3 
    88.8,0.3 87.6,0.1 87.5,0.3 87.1,1.8 86.4,5 76.8,0 77.4,1.1 76.6,3.6 76.7,6.8 75.4,7.7 74.9,9.7 73.8,10.6 72.4,12.4 71.6,13.1 
    70.4,16.2 68.1,15.1 66,22.9 64.3,25 60.8,24.4 59.4,22.4 58.3,22.1 58.2,26.1 56.9,27.7 57.3,29.2 55.2,31.4 55.6,33.2 51.8,39.7 
    51,42.4 52.7,43.8 50.9,46 51,47.5 47.7,50.3 47,49.2 42.9,52.1 42.6,51.9 41.6,53.6 35.5,56.2 32.9,54.7 32.4,55.7 30.2,57.8 
    27.4,58 22.5,55.4 22.4,53.9 20.9,53.2 17.3,58.1 14.3,59.2 11.6,61.9 11.2,64.2 9.1,65.4 9,67 7.3,68.8 5.7,69.2 5.2,71.1 
    3.9,71.6 0,74 25,71.1 25.2,70.1 31.6,69.4 31.3,70.1 59.4,66.8 98.8,59.5 127.7,53.4 127.4,52.9 127.8,52.8 128.7,53.7 128.6,52.3 
    128.3,50.4 129.9,51.6 130.8,53.7 130.8,52.4 127.4,46.9 127.4,45.7 126.7,44.9 125.4,45.6 125.9,47 125.1,47 124.7,46 124.1,46.9 
    123.2,45.8 121.1,45.7 120.9,46.4 122.4,48.5 121,47.8 120.5,46.8 120.1,47.6 119.3,47.7 117.8,49.4 118.1,47.8 118.1,46.4 
    116.6,45.7 114.8,45.2 114.6,43.5 114,42.2 113.4,43.3 111.7,42.3 109.7,42.6 109.9,41.7 111.4,41.5 112.3,42 114,41.2 114.9,41.6 
    115.4,42.6 115.4,43.3 117.3,43.7 117.6,44.6 118.5,45 119.4,46.2 120.8,44.6 121.4,44.6 121.3,42.5 120,43.5 119.4,42.6 
    120.9,42.4 119.7,41.5 118.5,42.1 118.4,40.4 116.7,40.6 114.5,39.5 112.7,37.3 116.3,39.5 117.2,39.8 118.9,39 117.2,38.1 
    117.8,37.5 116.8,37 117.6,36.8 117.3,35.9 118.4,36.8 118.8,36 119.2,37.3 120.4,38.1 121,37.6 120.5,37 120.4,34.5 119.3,34.4 
    117.7,33.6 118.6,32.5 116.6,32.4 116.2,31.9 114.8,32.5 113.4,31.7 112.9,30.5 110.8,29.3 108.7,27.5 106.5,25.6 109.5,26.9 
    110.4,28.1 112.5,28.8 114.8,31.3 115,29.6 115.6,30.9 117.9,31.4 117.9,27.4 117.1,26.3 118.2,26.7 118.3,25.1 115.2,23.7 
    113.6,23.5 112.3,23.3 112.6,22.1 111.1,21.8 111,21.2 109.2,21.2 109,22 108.3,21 105.6,21 104.6,20.6 104.4,19.6 103.2,19 
    102.8,17.5 102.2,17.1 101.5,18.2 100.6,18.4 99.7,19.1 98.2,19.1 97.3,17.8 97.7,14.7 98.2,12.4 97.1,10.8 "/></div></a>
isherwood
  • 58,414
  • 16
  • 114
  • 157
Derek R
  • 21
  • 2
  • See https://stackoverflow.com/questions/38877946/change-svg-polygon-and-text-fill-colours-when-hovering-over-parent. You can group polygons to add a hover effect on all of them. – isherwood Jan 04 '22 at 13:45

1 Answers1

0

Like you suggest yourself this can be solved using the <g> element. Basically I all the <polygon>s are grouped into a parent <g>.

If you would like the link only applying to the group you can move the <a> so that it becomes a parent element for the <g> (remember to move the ending tags also).

.st2 {
  fill: #A72C2A;
}

.st2:hover {
  fill: black;
}
<div>
  <a href="va.html">
    <svg version="1.1" class="va" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 134.1 74" style="enable-background:new 0 0 134.1 74;" xml:space="preserve">
      <g class="st2">
        <polygon points="133.7,19.4 133.7,19.4 132.6,22.2 133.1,23.3 133.5,22.2 134.1,20 134,20.1 "/>
        <polygon points="127.7,22.5 127.1,22 126.7,22.9 127.4,23.2 127.2,25.1 126.7,24.6 125.4,25.6 126.4,26 124.6,30.4 
    124.7,38.5 126.6,41.6 127.1,40.1 127.5,37.4 127.2,35.1 127.9,34.2 127.7,32.8 128.9,32.2 128.3,31.7 128.8,31 129.6,32.1 
    129.4,33.2 129,37.1 130.1,34.9 130.5,31.8 130.6,28.8 130.3,26.8 130.9,24.5 132,22.7 132.1,20.5 132.1,20.5 128.2,21.8 "/>
        <polygon points="99.1,10.6 99.7,10 100,8.6 99.8,8.2 99.9,7.7 99.8,7.3 99.4,7.1 99.1,7 98.4,6.5 98.9,5.9 98.9,5.9 
    98.4,6.4 98,6 97.2,6 96.3,5.9 95.5,5 95.5,4.8 94.7,4.5 94,4.8 92.4,4.6 91.6,3.8 90.9,3.5 90.5,2.1 91.2,1.2 90.4,1.1 89.4,0.3 
    88.8,0.3 87.6,0.1 87.5,0.3 87.1,1.8 86.4,5 76.8,0 77.4,1.1 76.6,3.6 76.7,6.8 75.4,7.7 74.9,9.7 73.8,10.6 72.4,12.4 71.6,13.1 
    70.4,16.2 68.1,15.1 66,22.9 64.3,25 60.8,24.4 59.4,22.4 58.3,22.1 58.2,26.1 56.9,27.7 57.3,29.2 55.2,31.4 55.6,33.2 51.8,39.7 
    51,42.4 52.7,43.8 50.9,46 51,47.5 47.7,50.3 47,49.2 42.9,52.1 42.6,51.9 41.6,53.6 35.5,56.2 32.9,54.7 32.4,55.7 30.2,57.8 
    27.4,58 22.5,55.4 22.4,53.9 20.9,53.2 17.3,58.1 14.3,59.2 11.6,61.9 11.2,64.2 9.1,65.4 9,67 7.3,68.8 5.7,69.2 5.2,71.1 
    3.9,71.6 0,74 25,71.1 25.2,70.1 31.6,69.4 31.3,70.1 59.4,66.8 98.8,59.5 127.7,53.4 127.4,52.9 127.8,52.8 128.7,53.7 128.6,52.3 
    128.3,50.4 129.9,51.6 130.8,53.7 130.8,52.4 127.4,46.9 127.4,45.7 126.7,44.9 125.4,45.6 125.9,47 125.1,47 124.7,46 124.1,46.9 
    123.2,45.8 121.1,45.7 120.9,46.4 122.4,48.5 121,47.8 120.5,46.8 120.1,47.6 119.3,47.7 117.8,49.4 118.1,47.8 118.1,46.4 
    116.6,45.7 114.8,45.2 114.6,43.5 114,42.2 113.4,43.3 111.7,42.3 109.7,42.6 109.9,41.7 111.4,41.5 112.3,42 114,41.2 114.9,41.6 
    115.4,42.6 115.4,43.3 117.3,43.7 117.6,44.6 118.5,45 119.4,46.2 120.8,44.6 121.4,44.6 121.3,42.5 120,43.5 119.4,42.6 
    120.9,42.4 119.7,41.5 118.5,42.1 118.4,40.4 116.7,40.6 114.5,39.5 112.7,37.3 116.3,39.5 117.2,39.8 118.9,39 117.2,38.1 
    117.8,37.5 116.8,37 117.6,36.8 117.3,35.9 118.4,36.8 118.8,36 119.2,37.3 120.4,38.1 121,37.6 120.5,37 120.4,34.5 119.3,34.4 
    117.7,33.6 118.6,32.5 116.6,32.4 116.2,31.9 114.8,32.5 113.4,31.7 112.9,30.5 110.8,29.3 108.7,27.5 106.5,25.6 109.5,26.9 
    110.4,28.1 112.5,28.8 114.8,31.3 115,29.6 115.6,30.9 117.9,31.4 117.9,27.4 117.1,26.3 118.2,26.7 118.3,25.1 115.2,23.7 
    113.6,23.5 112.3,23.3 112.6,22.1 111.1,21.8 111,21.2 109.2,21.2 109,22 108.3,21 105.6,21 104.6,20.6 104.4,19.6 103.2,19 
    102.8,17.5 102.2,17.1 101.5,18.2 100.6,18.4 99.7,19.1 98.2,19.1 97.3,17.8 97.7,14.7 98.2,12.4 97.1,10.8 "/>
      </g>
    </svg>
  </a>
</div>
chrwahl
  • 8,675
  • 2
  • 20
  • 30