javascript - 当 SVG 在页面中的多个 SVG 的视口中时，SVG 上的动画

Question

我在一个页面中有三个 SVG，当它们在视口中时（一个接一个），我需要在滚动时触发 SVG 动画。

我使用这段代码：

    <script>
// Get the position on the page of the SVG
var svgLocation = document.getElementById("euhlm2ug8tw1").getBoundingClientRect();


// Scroll offset that triggers animation start.
// In this case it is the bottom of the SVG.
var offsetToTriggerAnimation = svgLocation.y + svgLocation.height;

// Function to handle the scroll event.
// Add an event handler to the document for the "onscroll" event
function scrollAnimTriggerCheck(evt)
{
  var viewBottom = window.scrollY + window.innerHeight;
  if (viewBottom > offsetToTriggerAnimation) {
    // Start the SMIL animation
    document.getElementById("animation").beginElement();
    // Remove the event handler so it doesn't trigger again
    document.removeEventListener("scroll", scrollAnimTriggerCheck);
  }
}

// Add an event handler to the document for the "onscroll" event
document.addEventListener("scroll", scrollAnimTriggerCheck);

</script>

如果我只有一个 SVG，它可以正常工作。但是如果我在同一个页面中放置更多的 SVG，事情就不会那么好了。

如果我放置三个具有不同 Id 元素的脚本，它就不起作用。

我可以将三个与不同 SVG 相关的脚本放在一起而不会产生冲突吗？

或者最好的方法是什么？

我找不到解决方案。

SVG 如下所示：

<svg id="euhlm2ug8tw1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 161.690000 59.070000" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"><path id="euhlm2ug8tw3" d="M125.300000,19.390000C123.430000,12.130000,124.810000,6.290000,133.780000,5.590000C136.660000,7.450000,139.930000,7.900000,141.180000,10.810000C145.560000,20.990000,131.150000,27.490000,125.300000,19.390000" opacity="0" fill="rgb(0,0,0)" stroke="none" stroke-width="1"/><path id="euhlm2ug8tw4" d="M73,14C71.750000,9.170000,72.670000,5.270000,78.650000,4.810000C80.570000,6.050000,82.750000,6.350000,83.580000,8.290000C86.490000,15.070000,76.900000,19.400000,73,14" opacity="0" fill="rgb(0,0,0)" stroke="none" stroke-width="0"/><path id="euhlm2ug8tw5" d="M132.190000,42.870000C132.140000,36.660000,142.670000,40.650000,137.170000,44.080000C134.890000,45.500000,132.220000,45.340000,132.190000,42.870000" transform="matrix(1 0 0 1 1.09532498999999 0.11944217500000)" opacity="0" fill="rgb(0,0,0)" stroke="none" stroke-width="1"/><path id="euhlm2ug8tw6" d="M144.030000,43.650000C147.330000,41.320000,152.360000,42.480000,152.910000,45.590000C154.120000,52.490000,140.250000,52.090000,144.030000,43.650000" opacity="0" fill="rgb(0,0,0)" stroke="none" stroke-width="1"/><path id="euhlm2ug8tw7" d="M94.010000,35.940000C90.340000,32.880000,97.390000,26.160000,102.760000,27.880000C106.730000,30.940000,99.400000,40.440000,94.010000,35.940000" opacity="0" fill="rgb(0,0,0)" stroke="none" stroke-width="1"/><path id="euhlm2ug8tw8" d="M38.800000,25.940000C39.230000,25.600000,39.300000,26.240000,39.730000,25.890000C39.760000,25.330000,39.960000,24.830000,39.940000,24.250000C39.400000,24.280000,38.250000,25.070000,38.800000,25.940000M8.700000,25.030000C9.190000,24.820000,9.540000,24.550000,9.660000,24.200000C9.910000,23.670000,9.130000,23.370000,9.310000,23.010000C9.870000,22.680000,9.950000,23.640000,10.460000,23.440000C10.390000,23.110000,9.810000,22.580000,10.410000,22.500000C10.820000,22.920000,11.190000,23.460000,11.690000,23.640000C11.840000,23.260000,11.780000,22.790000,11.430000,22.220000C12.100000,21.950000,12.170000,23.280000,12.710000,23.370000C13.610000,22.350000,14.820000,22.890000,15.750000,22.930000C16.020000,22.630000,15.720000,22.120000,16.250000,21.930000C16.810000,22.290000,16.960000,23.800000,17.910000,23.090000C18.480000,22.860000,17.880000,22.200000,18.570000,22.010000C19.070000,22.240000,18.530000,22.880000,18.600000,23.350000C20.190000,23.620000,20.520000,21.890000,21.160000,21C20.860000,19.800000,20.360000,19.310000,21.010000,18.560000C21.570000,18.470000,21.780000,19.320000,22.390000,19.080000C22.800000,18.930000,22.770000,18.610000,22.800000,18.310000C23.260000,18,23.410000,18.550000,23.800000,18.420000C24.400000,17.900000,23.880000,16.950000,24.180000,16.310000C24.630000,16.380000,24.660000,17.620000,25.230000,17.370000C26.110000,16.270000,28.180000,16.200000,28.940000,17.580000C30,17.700000,29.510000,16.600000,30.230000,16.210000C30.670000,16.990000,30.270000,17.460000,30.550000,18.190000C31.310000,18.790000,32.540000,17.960000,32.970000,17.650000C33.520000,19.490000,34.260000,20.940000,36.300000,19.970000C36.880000,20.680000,35.780000,20.740000,36.170000,21.380000C37.420000,22.840000,39.630000,21.670000,41,22.810000C43.400000,21.250000,45.070000,21.680000,46.840000,21.840000C47.090000,21.540000,47.320000,21.230000,47.570000,20.920000C49.020000,22.070000,51.060000,21.610000,52.460000,22.900000C52.460000,23.390000,52.070000,23.730000,52.330000,24.310000C53.560000,23.030000,54.370000,22.970000,56.110000,22.560000C55.990000,23.470000,56.630000,24.700000,57.850000,23.880000C58.180000,24.450000,57.400000,24.590000,57.880000,25.220000C60.480000,26.090000,63.740000,22.990000,65.940000,24.960000C65.900000,25.720000,66.190000,26.610000,66.790000,27.270000C66.200000,27.750000,65.960000,28.370000,66.330000,29.220000C64.940000,31.340000,61.800000,31.610000,60.770000,28.710000C59.500000,29.630000,56.750000,28.300000,55.590000,30.720000C56.400000,31.220000,56.550000,31.970000,57.150000,32.500000C56.260000,32.660000,55.210000,33.640000,54.170000,33.490000C53.260000,35.360000,51.480000,33.050000,49.920000,33.340000C49.050000,33.500000,48.510000,34.350000,47.720000,34.360000C45.780000,34.380000,44.260000,32.300000,44.550000,29.850000C43.670000,30.340000,43.280000,29.510000,42.460000,29.850000C42.810000,30.860000,42.610000,31.670000,42.060000,32.350000C40.870000,32.430000,40.870000,33.240000,39.410000,32.810000C39.120000,33.360000,38.540000,33.890000,39.530000,33.910000C39.360000,34.020000,39.070000,34.090000,39.130000,34.290000C39.540000,34.480000,39.750000,35.210000,40.090000,35.580000C39.380000,35.860000,39.370000,34.230000,38.570000,34.740000C38.570000,35.240000,39.360000,35.200000,38.700000,35.450000C38.240000,35.160000,37.770000,34.920000,37,35.470000C36.300000,34.890000,35.700000,34.020000,34.550000,34.680000C34.090000,34.400000,33.800000,33.630000,33.270000,33.530000C30.480000,33.810000,27.990000,34.870000,25.570000,34.590000C25.400000,35.090000,25,34.690000,24.850000,35.120000C24.140000,34.680000,23.810000,33.210000,22.560000,34.250000C23.340000,35.210000,22.420000,35.520000,22.720000,36.300000C21.120000,35.990000,20.680000,37.250000,19.560000,38.150000C18.880000,37.330000,17.720000,37.970000,17.140000,38.690000C16.850000,38.060000,16.290000,38.160000,15.850000,37.940000C15.170000,38.120000,15.770000,38.790000,15.190000,39.020000C14.750000,38.800000,14.490000,38.070000,13.730000,38.730000C13.440000,37.740000,12.110000,38.100000,11.720000,38.500000C11.210000,38.100000,11.480000,37.750000,11.070000,37.060000C10.910000,37.130000,10.760000,37.210000,10.600000,37.280000C9.940000,35.670000,8.910000,36.050000,8.620000,34.150000C8.190000,34.250000,7.670000,34.600000,7.460000,34.110000C7.390000,33.640000,8.680000,33.690000,8.350000,33.120000C7.970000,31.380000,7.070000,31.080000,5.900000,30.210000C6.500000,29.990000,6.780000,30.650000,7.530000,30.030000C7.770000,28.490000,6.710000,26.980000,6.030000,26.290000C6.660000,26.240000,6.950000,27.100000,7.720000,26.660000C8.640000,25.840000,7.120000,24.310000,6.970000,23.730000C7.560000,24.100000,8.020000,24.880000,8.700000,25.030000" opacity="0" fill="rgb(0,0,0)" stroke="none" stroke-width="1"/>
<animate xlink:href="#euhlm2ug8tw8" id="animation"
             attributeName="opacity"
             from="0" to="1" dur="1.5s" fill="freeze" 
             begin="indefinite"/>
<animate xlink:href="#euhlm2ug8tw4" id="antimation2"
             attributeName="opacity"
             from="0" to="1" dur="1s" fill="freeze" 
             begin="animation.begin+0.4s" />
<animate xlink:href="#euhlm2ug8tw7" id="antimation3"
             attributeName="opacity"
             from="0" to="1" dur="1s" fill="freeze" 
             begin="animation.begin+0.8s" />
<animate xlink:href="#euhlm2ug8tw3" id="antimation4"
             attributeName="opacity"
             from="0" to="1" dur="1s" fill="freeze" 
             begin="animation.begin+1.2s" />
<animate xlink:href="#euhlm2ug8tw5" id="antimation5"
             attributeName="opacity"
             from="0" to="1" dur="1s" fill="freeze" 
             begin="animation.begin+1.6s" />
<animate xlink:href="#euhlm2ug8tw6" id="antimation6"
             attributeName="opacity"
             from="0" to="1" dur="1s" fill="freeze" 
             begin="animation.begin+2s" />
</svg>

标签： javascripthtmlcsssvg