Html – CSS styling for individual paths not working

I have a visual that has 11 hotspots spaced around a png graphic. I have created individual paths for each, and want to create a link as well as a hover that changes color to show which area is selected. The link and the hover work for the first graph in the list but not for any of the following ones. The CSS is:

 #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  {
    opacity: .5
  }

the HTML is (many lines of png graphic deleted, the second python url variable is a place holder to see if urls were needed to activate hover and would be replaced with the real one):

 <div class='containervert' style='top: 5%;'>
        <?xml version="1.0" encoding="UTF-8"?>
        <!-- Generated by Pixelmator Pro 3.6.9 -->
        <svg width="720" height="688" viewBox="0 0 720 688" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">


(png data)

            <a href='{% url 'introduction' %}'>
            <path id="path_cm" fill="#027aff" stroke="none" opacity="0" d="M 707.76001 330.686188 C 707.76001 311.409363 692.125793 295.78241 672.840027 295.78241 C 653.554199 295.78241 637.919983 311.409363 637.919983 330.686188 C 637.919983 349.963013 653.554199 365.589966 672.840027 365.589966 C 692.125793 365.589966 707.76001 349.963013 707.76001 330.686188 Z"/>
            <a>
            <a href='{% url 'introduction' %}'>
            <path id="path_rm" fill="#027aff" stroke="none" opacity="0" d="M 676.919983 195.78241 C 676.919983 176.452454 661.249939 160.78241 641.920044 160.78241 C 622.590027 160.78241 606.919983 176.452454 606.919983 195.78241 C 606.919983 215.112366 622.590027 230.78241 641.920044 230.78241 C 661.249939 230.78241 676.919983 215.112366 676.919983 195.78241 Z"/>
            <a>
            <path id="#path_is" fill="#027aff" stroke="none" opacity="0" d="M 532.919983 52.78241 C 532.919983 33.452454 517.249939 17.78241 497.920013 17.78241 C 478.589996 17.78241 462.919983 33.452454 462.919983 52.78241 C 462.919983 72.112366 478.589996 87.78241 497.920013 87.78241 C 517.249939 87.78241 532.919983 72.112366 532.919983 52.78241 Z"/>
            <path id="#path_bc" fill="#027aff" stroke="none" opacity="0" d="M 707.919983 330.78241 C 707.919983 311.452454 692.249939 295.78241 672.920044 295.78241 C 653.590027 295.78241 637.919983 311.452454 637.919983 330.78241 C 637.919983 350.112366 653.590027 365.78241 672.920044 365.78241 C 692.249939 365.78241 707.919983 350.112366 707.919983 330.78241 Z"/>
            <path id="#path_hr" fill="#027aff" stroke="none" opacity="0" d="M 82.919983 332.78241 C 82.919983 313.452454 67.249954 297.78241 47.920013 297.78241 C 28.59001 297.78241 12.919983 313.452454 12.919983 332.78241 C 12.919983 352.112366 28.59001 367.78241 47.920013 367.78241 C 67.249954 367.78241 82.919983 352.112366 82.919983 332.78241 Z"/>
            <path id="#path_ict" fill="#027aff" stroke="none" opacity="0" d="M 676.919983 467.78241 C 676.919983 448.452454 661.249939 432.78241 641.920044 432.78241 C 622.590027 432.78241 606.919983 448.452454 606.919983 467.78241 C 606.919983 487.112366 622.590027 502.78241 641.920044 502.78241 C 661.249939 502.78241 676.919983 487.112366 676.919983 467.78241 Z"/>
            <path id="#path_sc" fill="#027aff" stroke="none" opacity="0" d="M 195.919983 570.78241 C 195.919983 551.452454 180.249954 535.78241 160.920013 535.78241 C 141.590012 535.78241 125.919983 551.452454 125.919983 570.78241 C 125.919983 590.112366 141.590012 605.78241 160.920013 605.78241 C 180.249954 605.78241 195.919983 590.112366 195.919983 570.78241 Z"/>
            <path id="#path_fa" fill="#027aff" stroke="none" opacity="0" d="M 311.919983 627.78241 C 311.919983 608.452454 296.249969 592.78241 276.920013 592.78241 C 257.589996 592.78241 241.919983 608.452454 241.919983 627.78241 C 241.919983 647.112366 257.589996 662.78241 276.920013 662.78241 C 296.249969 662.78241 311.919983 647.112366 311.919983 627.78241 Z"/>
            <path id="#path_env" fill="#027aff" stroke="none" opacity="0" d="M 474.919983 635.78241 C 474.919983 616.452454 459.249969 600.78241 439.920013 600.78241 C 420.589996 600.78241 404.919983 616.452454 404.919983 635.78241 C 404.919983 655.112366 420.589996 670.78241 439.920013 670.78241 C 459.249969 670.78241 474.919983 655.112366 474.919983 635.78241 Z"/>
            <path id="#path_hs" fill="#027aff" stroke="none" opacity="0" d="M 593.919983 574.78241 C 593.919983 555.452454 578.249939 539.78241 558.920044 539.78241 C 539.590027 539.78241 523.919983 555.452454 523.919983 574.78241 C 523.919983 594.112366 539.590027 609.78241 558.920044 609.78241 C 578.249939 609.78241 593.919983 594.112366 593.919983 574.78241 Z"/>
            <path id="#path_em" fill="#027aff" stroke="none" opacity="0" d="M 109.919983 467.78241 C 109.919983 448.452454 94.249954 432.78241 74.920013 432.78241 C 55.590012 432.78241 39.919983 448.452454 39.919983 467.78241 C 39.919983 487.112366 55.590012 502.78241 74.920013 502.78241 C 94.249954 502.78241 109.919983 487.112366 109.919983 467.78241 Z"/>
        </svg>
    
    
</div>
</body>
</html>

I made CSS attributes for each graphic by name and expected each to sow a semi transparent circle; but ill the first one in the list, path_cm behaved as expected.