Переключатель класса SVG не отображается в браузере Edge - PullRequest
Новая
       29

Переключатель класса SVG не отображается в браузере Edge

0 голосов
/ 09 сентября 2018

Я пытаюсь заставить прикрепленный код работать.

Это меню, выполненное в SVG (с инструкциями символа / использования), которое анимируется с помощью добавления / удаления класса (класс 'активный').

Он работает в Chrome, но не работает в Edge.Классы элементов SVG действительно меняются, но новый 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>

1 Ответ

0 голосов
/ 11 сентября 2018

Я пытаюсь сделать тест с Edge и Chrome.

В Chrome работает нормально.

В Edge он работает с обновлением, а иногда не работает.

enter image description here

Возможно, что проблема с браузером Edge.

Вы можете попробовать опубликовать вопрос на форуме ниже. Этот сайт отслеживает проблемы, связанные с браузером Edge. Таким образом, они могут помочь вам решить эту проблему.

Система отслеживания проблем EdgeHTML

Привет

Дипак

...