1

WordPress 网站。我正在尝试更改通过 bodymovin 设置动画的 svg 图标的颜色。我希望动画在悬停时改变颜色，我想我可以通过定位 svg 路径来做到这一点。问题是我无法定位 svg。我在一个 HTML 集合中有七个图标，每个项目都有一个嵌套在其中的 svg。如何瞄准这些？

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

我的 php 文件：

  <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>

我试过在icon上使用 innerHTML 属性，但是 console.log 出现空白。

4

0 回答 0