原理：修改filter的hue-rotate属性
效果：
代码:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>filter</title><style>* {margin: 0;padding: 0;}.page {display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #000000;}img {}</style></head><body><div class="page"><img id="image" src="http://cdn.ljynet.com/img/bit.svg" alt="" /></div><script>const img = document.getElementById("image");const filter = (color) => {img.style.filter = `invert(100%) hue-rotate(${color}deg)`;};let color = 0;setInterval(() => {filter(color);color += 10;}, 100);</script></body>
</html>
![[图解]企业应用架构模式2024新译本讲解16-行数据入口2](https://img-blog.csdnimg.cn/direct/0cb7ec57d47642a694c3f05c836a40cb.png)
