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 显示为空白。