个别路径的 CSS 样式不起作用

我有一个视觉效果，其中有 11 个热点，分布在 png 图形周围。我为每个热点创建了单独的路径，并希望创建一个链接以及一个悬停，该悬停会改变颜色以显示所选区域。链接和悬停适用于列表中的第一个图形，但不适用于以下任何图形。CSS 为：

 #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
  }

HTML 是（删除了许多行 png 图形，第二个 python url 变量是一个占位符，用于查看是否需要 url 来激活悬停并将其替换为真实的 url）：

 <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>

我根据名称为每个图形创建了 CSS 属性，并期望每个图形都呈现一个半透明的圆圈；但在列表中的第一个图形中，path_cm 的行为符合预期。