Question

正如标题所述，我的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>

如您所见，我更改了其中一个的ID，因此可以在index.html页面上使用Javascript对其进行定位：

    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');
}
}

不幸的是，这不适用于我。我没有从中得到任何错误，什么也没发生。

我想知道你们中的任何人是否会知道如何成功做到这一点？

任何回应将不胜感激！

非常感谢亚当

滚动超过特定点后，使用原始Javascript更改SVG文件中ID的颜色

0 个答案: