SVG class toggle not rendering in the Edge browser

Question

I am trying to make the attached code work.

This is a menu done in SVG (with symbol/use statements), which is animated through class addition/removal (class 'active').

It does work in Chrome, but fails to work in Edge. The classes of SVG elements do change, but the new CSS for the 'active' class is not rendered.

I tried adding references to svg4everybody and svgxuse to a Pen ( https://codepen.io/paramuse/pen/VGymRP?editors=1010 ) -- it did not resolve the issue. However, inside the pen -- any change to the code renders the correct CSS (so it seems any 'refresh' event renders the CSS).

Any help would be appreciated.

 var currentmenu; var listen_elements = ['listentop1', 'listentop2', 'listentop3', 'listentop4', 'listentop5', 'listentop6', 'listenelem1', 'listenelem2', 'listenelem3','listenelem4', 'listenbottom1', 'listenbottom2', 'listenbottom3'] var news_elements = ['newstop1','newselem1', 'newselem2', 'newselem3','newselem4', 'newsbottom1', 'newsbottom2'] function makeActive(section) { console.log(section); if (this.currentmenu == section) { return; } this.currentmenu = section; if (section == 'listen') { for (var elem=0; elem < listen_elements.length; elem++) { document.getElementById(listen_elements[elem]).setAttribute("class","active"); } for (var elem=0; elem < news_elements.length; elem++) { document.getElementById(news_elements[elem]).setAttribute("class",""); } } if (section == 'news') { for (var elem=0; elem < news_elements.length; elem++) { document.getElementById(news_elements[elem]).setAttribute("class","active"); } for (var elem=0; elem < listen_elements.length; elem++) { document.getElementById(listen_elements[elem]).setAttribute("class",""); } } } 

  <svg width="96" height="464"> <style type="text/css"> #listentop1 { fill: #FFFFFF; transform: none; } #listentop1.active { fill: #FDBC11; transform: translate(8px,8px); } #listentop2 { transform: none; } #listentop2.active { transform: scale(0.5) translate(48px,16px); } #listentop3 { transform: none; } #listentop3.active { transform: translate(8px,8px); } #listentop4 { transform: none; } #listentop4.active { transform: translate(8px,8px); } #listentop5 { transform: none; stroke-width: 3; } #listentop5.active { transform: scale(0.5) translate(48px,16px); stroke-width: 6; } #listentop6 { transform: none; } #listentop6.active { transform: translate(8px,8px); } #listenelem1 { fill: #FFFFFF; transform: none; } #listenelem1.active { fill: #FDBC11; transform: translate(8px,8px); } #listenelem2 { transform: none; } #listenelem2.active { transform: translate(8px,8px); } #listenelem3 { transform: none; } #listenelem3.active { transform: translate(8px,8px); } #listenelem4 { transform: rotate(-90deg); } #listenelem4.active { transform: rotate(-90deg) translate(-8px,8px); } #listenbottom1 { stroke: #FFFFFF; } #listenbottom1.active { stroke:#000000; } #listenbottom2 { visibility: hidden; } #listenbottom2.active { visibility: visible; } #listenbottom3 { visibility: hidden; fill: none; } #listenbottom3.active { visibility: visible; fill: none; } #newstop1 { visibility: hidden; } #newstop1.active { visibility: visible; } #newselem1 { fill: #FFFFFF; transform: none; } #newselem1.active { fill: #FDBC11; transform: translate(8px,8px); } #newselem2 { transform: none; } #newselem2.active { transform: translate(8px,8px); } #newselem3 { transform: none; } #newselem3.active { transform: translate(8px,8px); } #newselem4 { transform: rotate(-90deg); } #newselem4.active { transform: rotate(-90deg) translate(-8px,8px); } #newsbottom1 { visibility: visible } #newsbottom1.active { visibility: hidden; } #newsbottom2 { visibility: hidden; } #newsbottom2.active { visibility: visible; } </style> <defs> <symbol id="listen"> <rect width="16" height="80" fill="#DDDDDD" x="32" y="16" /> <rect id="listenelem1" width="32" height="80" fill="#FFFFFF" x="0" y="16" /> <line id="listenelem2" x1="0" y1="16" x2="0" y2="96" stroke="#000000" stroke-width="3" /> <line id="listenelem3" x1="32" y1="16" x2="32" y2="96" stroke="#000000" stroke-width="3" /> <line x1="48" y1="16" x2="48" y2="96" stroke="#000000" stroke-width="3" /> <text id="listenelem4" x="-80" y="22" fill="#000000" font-size="16" font-family="'Lato', sans-serif" font-style="italic" transform="rotate(-90)">LISTEN</text> <rect id="listentop1" width="32" height="16" fill="#FFFFFF" x="0" y="0" /> <polygon id="listentop2" points="32,0 48,16 32,16" fill="#DDDDDD" /> <line id="listentop3" x1="0" y1="0" x2="0" y2="16" stroke="#000000" stroke-width="3" /> <line id="listentop4" x1="32" y1="0" x2="32" y2="16" stroke="#000000" stroke-width="3" /> <line id="listentop5" x1="32" y1="0" x2="48" y2="16" stroke="#000000" stroke-width="3" /> <line id="listentop6" x1="0" y1="0" x2="32" y2="0" stroke="#000000" stroke-width="3" /> <rect width="16" height="16" fill="#DDDDDD" x="32" y="96" /> <rect width="32" height="16" fill="#FFFFFF" x="0" y="96" /> <line id="listenbottom1" x1="0" y1="96" x2="32" y2="96" stroke="#FFFFFF" stroke-width="3" /> <polygon id="listenbottom2" points="32,96 40,104 40,96" fill="#FDBC11" transform="scale(0)" /> <polyline id="listenbottom3" points="32,96 40,104 40,96" stroke="#000000" transform="scale(0)" stroke-width="3" /> <line x1="0" y1="96" x2="0" y2="112" stroke="#000000" stroke-width="3" /> <line x1="32" y1="96" x2="32" y2="112" stroke="#000000" stroke-width="3" /> <line x1="48" y1="96" x2="48" y2="112" stroke="#000000" stroke-width="3" /> </symbol> <symbol id="news"> <polygon points="32,80 48,80 48,96" fill="#DDDDDD" /> <line x1="48" y1="80" x2="48" y2="96" stroke="#000000" stroke-width="3" /> <polygon id="newsbottom1" points="0,80 32,80 48,96 16,96" fill="#000000" stroke="#000000" stroke-width="3" /> <rect width="16" height="80" fill="#DDDDDD" x="32" y="0" /> <rect id="newselem1" width="32" height="80" fill="#FFFFFF" x="0" y="0" /> <line id="newselem2" x1="0" y1="0" x2="0" y2="80" stroke="#000000" stroke-width="3" /> <line id="newselem3" x1="32" y1="0" x2="32" y2="80" stroke="#000000" stroke-width="3" /> <line x1="48" y1="0" x2="48" y2="80" stroke="#000000" stroke-width="3" /> <text id="newselem4" x="-64" y="22" fill="#000000" font-size="16" font-family="'Lato', sans-serif" font-style="italic" transform="rotate(-90 0 0)">NEWS</text> <polygon id="newstop1" points="0,0 32,0 40,8 8,8" fill="#000000" stroke="#000000" stroke-width="3" /> <polygon id="newsbottom2" points="8,88 40,88 48,96 16,96" fill="#000000" stroke="#000000" stroke-width="3" /> </symbol> </defs> <use x="0" y="0" xlink:href="#listen" stroke-linecap="round" stroke-linejoin="round" onclick="makeActive('listen')" /> <use x="0" y="96" xlink:href="#news" stroke-linecap="round" stroke-linejoin="round" onclick="makeActive('news')" /> </svg> 

Answer 1

I try to make a test with Edge and Chrome.

In Chrome, It is working properly.

In Edge, It works with refreshing and other times it is not working.

It is possible that there is some issue with the Edge browser.

You can try to post the issue in forum below. This site tracks the Edge browser related issues. So they can help you to fix this issue.

EdgeHTML issue tracker

Regards

Deepak