How to get the a Polygon and Path in an SVG to function together in an href

user_17812080 0
Viewed 39

My goal is to get the red color to display over the whole svg when static\and have it change to blue with a white apple when hovered over. I have it able to change to blue when hovered over currently, and the white to work when it is hovered over, but I'm not sure how to get the white and the blue to work together.

<style>
    .statecolor {
        fill: #A72C2A;
    }
    .statecolor:hover {
        fill: #48A8BD;
    }
    .cls-2:hover {
        fill: #fff
    }
</style>

<div>
    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 134.05 73.96">
        <a href="va.html">
            <g class="statecolor">
                <polygon class="cls-1" points="133.7 19.39 133.7 19.39 132.6 22.19 133.1 23.29 133.5 22.19 134.05 20.05 134.03 20.06 133.7 19.39" />
                <polygon class="cls-1" points="127.66 22.49 127.1 21.99 126.7 22.89 127.4 23.19 127.2 25.09 126.7 24.59 125.4 25.59 126.4 25.99 124.6 30.39 124.7 38.49 126.6 41.59 127.1 40.09 127.5 37.39 127.2 35.09 127.9 34.19 127.7 32.79 128.9 32.19 128.3 31.69 128.8 30.99 129.6 32.09 129.4 33.19 129 37.09 130.1 34.89 130.5 31.79 130.6 28.79 130.3 26.79 130.9 24.49 132 22.69 132.1 20.49 132.1 20.49 128.23 21.84 127.66 22.49" />
                <polygon class="cls-1" points="99.08 10.57 99.72 9.99 100.02 8.65 99.82 8.16 99.92 7.67 99.78 7.35 99.45 7.08 99.06 6.98 98.43 6.48 98.9 5.89 98.9 5.89 98.37 6.42 97.99 6.04 97.18 6.03 96.34 5.89 95.48 5.04 95.54 4.78 94.71 4.49 94 4.75 92.36 4.62 91.58 3.83 90.88 3.55 90.48 2.14 91.15 1.23 90.36 1.1 89.45 0.27 88.77 0.35 87.58 0.13 87.5 0.27 87.13 1.77 86.42 5.01 76.79 0 77.42 1.12 76.55 3.61 76.66 6.78 75.36 7.65 74.87 9.7 73.85 10.61 72.4 12.45 71.63 13.13 70.4 16.2 68.09 15.14 65.98 22.94 64.3 25.01 60.76 24.38 59.43 22.43 58.33 22.1 58.24 26.07 56.92 27.67 57.33 29.21 55.22 31.42 55.59 33.22 51.79 39.7 50.96 42.42 52.65 43.77 50.87 46.03 50.98 47.51 47.73 50.33 46.99 49.16 42.92 52.1 42.58 51.88 41.63 53.58 35.54 56.23 32.92 54.66 32.42 55.74 30.21 57.83 27.43 57.95 22.48 55.36 22.38 53.88 20.92 53.2 17.26 58.13 14.31 59.15 11.6 61.86 11.18 64.15 9.13 65.42 9.03 67.02 7.29 68.76 5.71 69.2 5.23 71.05 3.94 71.56 0 73.96 24.97 71.11 25.17 70.11 31.6 69.41 31.3 70.09 59.41 66.75 98.76 59.45 127.65 53.4 127.4 52.89 127.8 52.79 128.7 53.69 128.6 52.29 128.3 50.39 129.9 51.59 130.8 53.69 130.8 52.39 127.4 46.89 127.4 45.69 126.7 44.89 125.4 45.59 125.9 46.99 125.1 46.99 124.7 45.99 124.1 46.89 123.2 45.79 121.1 45.69 120.9 46.39 122.4 48.49 121 47.79 120.5 46.79 120.1 47.59 119.3 47.69 117.8 49.39 118.1 47.79 118.1 46.39 116.6 45.69 114.8 45.19 114.6 43.49 114 42.19 113.4 43.29 111.7 42.29 109.7 42.59 109.9 41.69 111.4 41.49 112.3 41.99 114 41.19 114.9 41.59 115.4 42.59 115.4 43.29 117.3 43.69 117.6 44.59 118.5 44.99 119.4 46.19 120.8 44.59 121.4 44.59 121.3 42.49 120 43.49 119.4 42.59 120.9 42.39 119.7 41.49 118.5 42.09 118.4 40.39 116.7 40.59 114.5 39.49 112.7 37.29 116.3 39.49 117.2 39.79 118.9 38.99 117.2 38.09 117.8 37.49 116.8 36.99 117.6 36.79 117.3 35.89 118.4 36.79 118.8 35.99 119.2 37.29 120.4 38.09 121 37.59 120.5 36.99 120.4 34.49 119.3 34.39 117.7 33.59 118.6 32.49 116.6 32.39 116.2 31.89 114.8 32.49 113.4 31.69 112.9 30.49 110.8 29.29 108.7 27.49 106.5 25.59 109.5 26.89 110.4 28.09 112.5 28.79 114.8 31.29 115 29.59 115.6 30.89 117.9 31.39 117.9 27.39 117.1 26.29 118.2 26.69 118.3 25.09 115.2 23.69 113.6 23.49 112.3 23.29 112.6 22.09 111.1 21.79 111 21.19 109.2 21.19 109 21.99 108.3 20.99 105.6 20.99 104.6 20.59 104.4 19.59 103.2 18.99 102.8 17.49 102.2 17.09 101.5 18.19 100.6 18.39 99.7 19.09 98.2 19.09 97.3 17.79 97.7 14.69 98.18 12.39 97.05 10.77 99.08 10.57" />
                <path class="cls-2" d="M74.82,38.07c.39-.87.71-1.74,1.15-2.55a2.17,2.17,0,0,1,1.71-1.24h.66c0,.42,0,.62-.47.65a1.78,1.78,0,0,0-1,.44,6.87,6.87,0,0,0-1.41,2.94c.33-.07.66-.12,1-.16a4.16,4.16,0,0,1,4.26,3.58,5.57,5.57,0,0,1-.94,4A13.75,13.75,0,0,1,76,49.59a2.85,2.85,0,0,1-1.89.68,1.63,1.63,0,0,1-.81-.32,4.89,4.89,0,0,0-3.61-1.15,1.52,1.52,0,0,1-1-.34,3,3,0,0,1-.74-1,12.17,12.17,0,0,1-.81-7,4.61,4.61,0,0,1,4.6-3.82,3.68,3.68,0,0,1,2.67,1.2C74.62,37.84,74.73,38,74.82,38.07Zm-7,3.8h.12c.19-.52.36-1.06.59-1.56.69-1.52,2.19-2.72,3.8-2.2.14,0,.38-.21.57-.32-.12-.19-.21-.49-.39-.56a3.4,3.4,0,0,0-3.47,1,6.11,6.11,0,0,0-1.2,3.64Z" transform="translate(0 0)" />
            </g>
            </svg>
        </a>
</div>

polygon href svg css html
1 Answers

You can create a CSS selector that also takes the apple into account when you hover the entire thing: .statecolor:hover .cls-2.

.statecolor {
  fill: #A72C2A;
}

.statecolor:hover {
  fill: #48A8BD;
}

.statecolor:hover .cls-2 {
  fill: #fff
}
<div>
  <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 134.05 73.96">
    <a href="va.html">
      <g class="statecolor">
        <polygon class="cls-1" points="133.7 19.39 133.7 19.39 132.6 22.19 133.1 23.29 133.5 22.19 134.05 20.05 134.03 20.06 133.7 19.39" />
        <polygon class="cls-1" points="127.66 22.49 127.1 21.99 126.7 22.89 127.4 23.19 127.2 25.09 126.7 24.59 125.4 25.59 126.4 25.99 124.6 30.39 124.7 38.49 126.6 41.59 127.1 40.09 127.5 37.39 127.2 35.09 127.9 34.19 127.7 32.79 128.9 32.19 128.3 31.69 128.8 30.99 129.6 32.09 129.4 33.19 129 37.09 130.1 34.89 130.5 31.79 130.6 28.79 130.3 26.79 130.9 24.49 132 22.69 132.1 20.49 132.1 20.49 128.23 21.84 127.66 22.49" />
        <polygon class="cls-1" points="99.08 10.57 99.72 9.99 100.02 8.65 99.82 8.16 99.92 7.67 99.78 7.35 99.45 7.08 99.06 6.98 98.43 6.48 98.9 5.89 98.9 5.89 98.37 6.42 97.99 6.04 97.18 6.03 96.34 5.89 95.48 5.04 95.54 4.78 94.71 4.49 94 4.75 92.36 4.62 91.58 3.83 90.88 3.55 90.48 2.14 91.15 1.23 90.36 1.1 89.45 0.27 88.77 0.35 87.58 0.13 87.5 0.27 87.13 1.77 86.42 5.01 76.79 0 77.42 1.12 76.55 3.61 76.66 6.78 75.36 7.65 74.87 9.7 73.85 10.61 72.4 12.45 71.63 13.13 70.4 16.2 68.09 15.14 65.98 22.94 64.3 25.01 60.76 24.38 59.43 22.43 58.33 22.1 58.24 26.07 56.92 27.67 57.33 29.21 55.22 31.42 55.59 33.22 51.79 39.7 50.96 42.42 52.65 43.77 50.87 46.03 50.98 47.51 47.73 50.33 46.99 49.16 42.92 52.1 42.58 51.88 41.63 53.58 35.54 56.23 32.92 54.66 32.42 55.74 30.21 57.83 27.43 57.95 22.48 55.36 22.38 53.88 20.92 53.2 17.26 58.13 14.31 59.15 11.6 61.86 11.18 64.15 9.13 65.42 9.03 67.02 7.29 68.76 5.71 69.2 5.23 71.05 3.94 71.56 0 73.96 24.97 71.11 25.17 70.11 31.6 69.41 31.3 70.09 59.41 66.75 98.76 59.45 127.65 53.4 127.4 52.89 127.8 52.79 128.7 53.69 128.6 52.29 128.3 50.39 129.9 51.59 130.8 53.69 130.8 52.39 127.4 46.89 127.4 45.69 126.7 44.89 125.4 45.59 125.9 46.99 125.1 46.99 124.7 45.99 124.1 46.89 123.2 45.79 121.1 45.69 120.9 46.39 122.4 48.49 121 47.79 120.5 46.79 120.1 47.59 119.3 47.69 117.8 49.39 118.1 47.79 118.1 46.39 116.6 45.69 114.8 45.19 114.6 43.49 114 42.19 113.4 43.29 111.7 42.29 109.7 42.59 109.9 41.69 111.4 41.49 112.3 41.99 114 41.19 114.9 41.59 115.4 42.59 115.4 43.29 117.3 43.69 117.6 44.59 118.5 44.99 119.4 46.19 120.8 44.59 121.4 44.59 121.3 42.49 120 43.49 119.4 42.59 120.9 42.39 119.7 41.49 118.5 42.09 118.4 40.39 116.7 40.59 114.5 39.49 112.7 37.29 116.3 39.49 117.2 39.79 118.9 38.99 117.2 38.09 117.8 37.49 116.8 36.99 117.6 36.79 117.3 35.89 118.4 36.79 118.8 35.99 119.2 37.29 120.4 38.09 121 37.59 120.5 36.99 120.4 34.49 119.3 34.39 117.7 33.59 118.6 32.49 116.6 32.39 116.2 31.89 114.8 32.49 113.4 31.69 112.9 30.49 110.8 29.29 108.7 27.49 106.5 25.59 109.5 26.89 110.4 28.09 112.5 28.79 114.8 31.29 115 29.59 115.6 30.89 117.9 31.39 117.9 27.39 117.1 26.29 118.2 26.69 118.3 25.09 115.2 23.69 113.6 23.49 112.3 23.29 112.6 22.09 111.1 21.79 111 21.19 109.2 21.19 109 21.99 108.3 20.99 105.6 20.99 104.6 20.59 104.4 19.59 103.2 18.99 102.8 17.49 102.2 17.09 101.5 18.19 100.6 18.39 99.7 19.09 98.2 19.09 97.3 17.79 97.7 14.69 98.18 12.39 97.05 10.77 99.08 10.57" />
        <path class="cls-2" d="M74.82,38.07c.39-.87.71-1.74,1.15-2.55a2.17,2.17,0,0,1,1.71-1.24h.66c0,.42,0,.62-.47.65a1.78,1.78,0,0,0-1,.44,6.87,6.87,0,0,0-1.41,2.94c.33-.07.66-.12,1-.16a4.16,4.16,0,0,1,4.26,3.58,5.57,5.57,0,0,1-.94,4A13.75,13.75,0,0,1,76,49.59a2.85,2.85,0,0,1-1.89.68,1.63,1.63,0,0,1-.81-.32,4.89,4.89,0,0,0-3.61-1.15,1.52,1.52,0,0,1-1-.34,3,3,0,0,1-.74-1,12.17,12.17,0,0,1-.81-7,4.61,4.61,0,0,1,4.6-3.82,3.68,3.68,0,0,1,2.67,1.2C74.62,37.84,74.73,38,74.82,38.07Zm-7,3.8h.12c.19-.52.36-1.06.59-1.56.69-1.52,2.19-2.72,3.8-2.2.14,0,.38-.21.57-.32-.12-.19-.21-.49-.39-.56a3.4,3.4,0,0,0-3.47,1,6.11,6.11,0,0,0-1.2,3.64Z" transform="translate(0 0)" />
      </g>
    </a>
  </svg>
</div>

user_3220840
Related