How to target an svg element?

Question

Wordpress site. I'm trying to change the color of an svg icon that is being animated through bodymovin. I want the animation to change color on hover, and I thought I could do this by targeting the svg path. The problem is I cannot target the svg. I have seven icons in an HTML collection, each item has an svg nested in it. How do target these?

let animation = document.getElementsByClassName("animation");

Array.prototype.forEach.call(animation, (icon) => {
  let anim = bodymovin.loadAnimation({
    container: icon,
    path: `${icon.dataset.file}`,
    renderer: "svg",
    loop: false,
    autoplay: false,
  });

  icon.addEventListener("mouseenter", () => {
    anim.play();
  });
  icon.addEventListener("mouseleave", () => {
    anim.stop();
  });
});

My php file:

  <div class="animation" data-file="<?php echo $uri . '/lib/images/lottie/' . $eye . '.json'; ?>"></div>
        <div class="animation" data-file="<?php echo $uri . '/lib/images/lottie/' . $wheel . '.json'; ?>"></div>
        <div class="animation" data-file="<?php echo $uri . '/lib/images/lottie/' . $gauge . '.json'; ?>"></div>
        <div class="animation" data-file="<?php echo $uri . '/lib/images/lottie/' . $atom . '.json'; ?>"></div>
        <div class="animation" data-file="<?php echo $uri . '/lib/images/lottie/' . $links . '.json'; ?>"></div>
        <div class="animation" data-file="<?php echo $uri . '/lib/images/lottie/' . $tools . '.json'; ?>"></div>
        <div class="animation" data-file="<?php echo $uri . '/lib/images/lottie/' . $pin . '.json'; ?>"></div>

I've tried using the innerHTML property on icon, but a console.log comes up blank.