javascript - 如何定位 svg 元素?
问题描述
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 出现空白。
解决方案
推荐阅读
- python - 散景图未使用 show(p) 或 p.show() 显示
- java - 在neo4j中比较两个图有什么简单的方法吗
- java - Gradle,使用 gpg 进行多项目签名。访问后无法配置“发布”扩展
- project-reactor - 在 GatewayFilter 中处理 Mono.empty()
- python - numpy 数组的 set_printoptions 不适用于 numpy ndarray?
- android - 如何从 React Native 中的 Drawer 调用另一个组件中的函数
- spring-boot - 如何将带注释的类@Configuration 作为 REST 响应发送?在springboot中
- c# - 不使用 AsEnumerable() 拆分 DataTable
- javascript - Javascript 承诺与 promise.all 链接不起作用?
- sas - 将计数器附加到通过取消引用宏变量获得的字符串