Использование ванильного Javascript для изменения цвета идентификатора в файле SVG после прокрутки до определенной точки - PullRequest
0 голосов
/ 13 ноября 2018

Как видно из заголовка, в моем HTML есть объект SVG

      <object data="images/parallax_2/buildings_1.2.svg" type="image/svg+xml" id="building_1">

Это SVG здания, которое я сделал в иллюстраторе. Прокручивая страницу вниз, я хочу, чтобы определенные окна этого здания меняли цвет, как будто кто-то внутри включал свет.

В файле SVG это окна, которые я хочу изменить:

    <g>
    <polygon id="WINDOW_x5F_1" class="st107" points="583.3,1114.5 583.4,1047.9 607.4,1052 607.3,1118.7      "/>
    <polygon class="st107" points="628.1,1122.3 628.2,1055.7 652.2,1059.8 652.1,1126.5      "/>
    <polygon class="st107" points="672.9,1130.1 673,1063.4 697,1067.6 696.9,1134.2      "/>
    <polygon class="st107" points="717.6,1137.8 717.7,1071.1 741.8,1075.3 741.6,1142        "/>
    <polygon class="st107" points="762.4,1145.6 762.5,1078.9 786.5,1083.1 786.4,1149.7      "/>
    <polygon class="st107" points="807.2,1153.4 807.3,1086.7 831.3,1090.9 831.2,1157.5      "/>
    <polygon class="st107" points="851.9,1161.1 852.1,1094.5 876.1,1098.7 876,1165.3        "/>
    <polygon class="st107" points="896.7,1168.9 896.8,1102.2 920.9,1106.4 920.7,1173.1      "/>
    <polygon class="st107" points="941.5,1176.6 941.6,1110 965.6,1114.2 965.5,1180.8        "/>
</g>

Как вы можете видеть, я изменил идентификатор одного из них, чтобы затем настроить таргетинг на него с помощью Javascript на моей странице index.html:

    window.onscroll = function changeClass(){

  var scrollPosY = window.pageYOffset | document.body.scrollTop;

  // Get the Object by ID
  var a = document.getElementById("building_1");

  // Get the SVG document inside the Object tag
  var svgDoc = a.contentDocument;

  // Get one of the SVG items by ID;
  var svgItem = svgDoc.getElementsByClassName('st107');

  // Set the class to something else
  if(scrollPosY > 100) {
      svgItem.className = ('st1071');
} else if(scrollPosY <= 100) {
     svgItem.className =  ('st1071');
}
}

К сожалению, это не работает для меня. Я не получаю никаких ошибок от этого, просто ничего не происходит.

Мне было интересно, знает ли кто-нибудь из вас, как преуспеть в этом?

Любые ответы будут высоко оценены !!

Большое, большое спасибо, Адам

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...