Change SVG polygon color based upon page - svg

Question

I have an SVG that represents a flower (for lack of a better description using Polygons), each leaf is linked to a webpage. When hovering over the leaf it changes colour from green to yellow. This flower is shown on every page, it is functioning as a navigation menu.
What I can't get to work is that when a page is visited the color of the leaf to stay yellow, of the visited page.
Scenario:
User hovers over Communities (leaf).
Communities (leaf) color changes from green to yellow.
User clicks on Communities (leaf).
The communities page opens.
What I am trying to achieve.
The Communities leaf stays yellow when the visitor is on the communities page.
The code I have so far:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1112 1033.2" style="enable-background:new 0 0 1112 1033.2;" xml:space="preserve">
<style type="text/css">
.st0{fill:#104741;} /*The green color*/
.st0:hover{fill:#F0CB3F;} /*when hover over go yellow*/
.st1{fill:#FFFFFF;} /*standard color for the text*/
.st2{font-family:'Roboto-Bold', sans-serif;} /*Text type*/
.st3{font-size:45px;} /*Text size*/
.st4{fill:#F0CB3F;}
</style>
<a id="Teaching" xlink:href="https://tradeshack.au/teaching-online/" >
<polygon id="Teaching_00000051348337870285784970000016147037851407144324_" class="st0" points="547,303.2 368,403.2 189,303.2
189,103.3 368,3.3 547,103.3 "/>
<text transform="matrix(1 0 0 1 278.9999 223.2402)" class="st1 st2 st3">Teaching</text>
</a>
<a id="Learning" xlink:href="https://tradeshack.au/local-online-courses/" >
<polygon id="Learning_00000173841655452649517230000006122666773149035708_" class="st0" points="927,307.2 748,407.2 569,307.2
569,107.2 748,7.2 927,107.2 "/>
<text transform="matrix(1 0 0 1 658.3733 232.2399)" class="st1 st2 st3">Learning</text>
</a>
<a id="Home" xlink:href="https://tradeshack.au" >
<polygon id="Home_00000093143914122244361730000008396680916595534749_" class="st4" points="736,618.3 557,718.2 378,618.3
378,418.3 557,318.3 736,418.3 "/>
<image style="overflow:visible;" width="214" height="184" id="house_xA0_Image_00000048475658377819784140000012594620538900893574_" xlink:href="https://tradeshack.au/wp-content/uploads/2022/08/C6FE9EEE.png" transform="matrix(1.6822 0 0 1.7609 378 358.24)">
</image>
</a>
<a id="Growing" xlink:href="https://tradeshack.au/backyard-growers/" >
<polygon id="Growing_00000175323106510374922210000005630539508612177844_" class="st0" points="1112,621.4 933,721.4 754,621.4
754,421.4 933,321.5 1112,421.4 "/>
<text transform="matrix(1 0 0 1 851.8009 538.2402)" class="st1 st2 st3">Growing</text>
</a>
<a id="News" xlink:href="https://tradeshack.au/local-news/" >
<polygon id="News_00000098220304566128214590000010493917784746845323_" class="st0" points="360,621.2 181,721.2 2,621.2 2,421.3
181,321.3 360,421.3 "/>
<text transform="matrix(1 0 0 1 123.8486 538.24)" class="st1 st2 st3">News</text>
</a>
<a id="Local_Exchange" xlink:href="https://tradeshack.au/local-edible-exchange/" >
<polygon id="Local_Exchange_00000052093847367928459750000017120200193115507858_" class="st0" points="547,937.2 368,1037.2
189,937.2 189,737.2 368,637.2 547,737.2 "/>
<text transform="matrix(1 0 0 1 210.6318 853.24)" class="st1 st2 st3">Local Exchange</text>
</a>
<a id="Communities" xlink:href="https://tradeshack.au/local-communities/" >
<polygon id="Communities_00000128464967429771677690000007271752719640598663_" class="st0" points="927,937.2 748,1037.2
569,937.2 569,737.2 748,637.2 927,737.2 "/>
<text transform="matrix(1 0 0 1 612.1426 853.24)" class="st1 st2 st3">Communities</text>
</a>
</svg>
So how do I go about getting that done ;-)>
You can see a working example, without the bit that I cannot figure out, on my website Tradeshack website where the example is.

Answer 1

This is resolved now by putting a page specific SVG on each page.