[Python] Persistent color change after visiting embedded svg graphic link

I have a svg graphic that links to various survey pages. The svg paths are embedded between <a href> and </a> to link the graphic to a survey url. Hover works fine. Each #path_xx is a unique survey. After the user completes a survey and is returned to the selection page I want the svg element just visited to change color to indicate that survey has been completed. I have tried several css styles but none have worked:

#path_cm:hover, #path_rm:hover, #path_is:hover, #path_bc:hover, #path_hr:hover, #path_ict:hover,
#path_sc:hover, #path_fa:hover, #path_env:hover, #path_hs:hover, #path_em:hover, #path_center:hover {
opacity: .5;
stroke: blue;
stroke-opacity: 1;
stroke-width: 5
}

#path_cm:visited, #path_rm:visited, #path_is:visited, #path_bc:visited, #path_hr:visited, #path_ict:visited,
#path_sc:visited, #path_fa:visited, #path_env:visited, #path_hs:visited, #path_em:visited, #path_center:visited {
color: red;
opacity: .5;
}

link:visited svg path{
color: red;
opacity: .5;
}


Here is the applicable template:

<a href='{% url 'introduction' %}'>
<path id="path_bc" fill="#027aff" stroke="none" opacity="0" d="M 210.919983 80.78241 C 210.919983 61.452454 195.249954 45.78241 175.920013 45.78241 C 156.590012 45.78241 140.919983 61.452454 140.919983 80.78241 C 140.919983 100.112366 156.590012 115.78241 175.920013 115.78241 C 195.249954 115.78241 210.919983 100.112366 210.919983 80.78241 Z"/>
</a>


Tried several variations on style; including link:visited svg path_bc and link:visited svg #path_bc.

Continue reading...