Как видно из заголовка, в моем 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');
}
}
К сожалению, это не работает для меня. Я не получаю никаких ошибок от этого, просто ничего не происходит.
Мне было интересно, знает ли кто-нибудь из вас, как преуспеть в этом?
Любые ответы будут высоко оценены !!
Большое, большое спасибо,
Адам