SVG类切换不在Edge浏览器中呈现

Question

我试图使附加的代码工作。

这是一个在SVG（带符号/用语句）中完成的菜单，通过类添加/删除（类'活动'）进行动画处理。

它可以在Chrome中运行，但无法在Edge中运行。 SVG元素的类确实发生了变化，但是不会渲染“active”类的新CSS。

我尝试将对svg4everybody和svgxuse的引用添加到Pen（https://codepen.io/paramuse/pen/VGymRP?editors=1010） - 它没有解决问题。但是，在笔内 - 对代码的任何更改都会呈现正确的CSS（因此似乎任何'refresh'事件都会呈现CSS）。

任何帮助，将不胜感激。

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

我尝试使用Edge和Chrome进行测试。

在Chrome中，它运行正常。

在Edge中，它适用于刷新，有时则不起作用。

Edge浏览器可能存在一些问题。

您可以尝试在下面的论坛中发布该问题。此站点跟踪Edge浏览器相关问题。所以他们可以帮助您解决这个问题。

EdgeHTML issue tracker

问候

迪帕克