javascript - 循环更改 SVG 填充
问题描述
我有简单的 SVG 插图,有什么方法可以不断改变它的颜色吗?就像一个循环不停的随机颜色变化。
这是我的 svg
<svg width="533" height="499" viewBox="0 0 533 499" fill="none" xmlns="http://www.w3.org/2000/svg">
解决方案
这就是我的做法:我使用颜色hsl
进行填充,并使用requestAnimationFrame
. 我希望它有所帮助。
let p1 = document.querySelectorAll("path")[0];
let p2 = document.querySelectorAll("path")[1]
let h = 0;
function changeColor(){
window.requestAnimationFrame(changeColor);
h+=.5;
h2=210+h;
p1.setAttributeNS(null,"fill", `hsl(${~~h},100%,50%)`);
p2.setAttributeNS(null,"fill", `hsl(${~~h2},100%,50%)`);
}
changeColor()
<svg width="533" height="499" viewBox="0 0 533 499" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M258.089 59.6035C309.803 -3.94652 379.363 78.1818 407.679 127.19C352.338 67.4782 301.718 129.7 287.076 167.787C272.435 205.874 233.694 210.043 205.199 217.679C187.359 222.459 146.446 248.26 128.6 264.085C109.864 289.466 48.3081 292.846 41.8378 268.698C27.0852 213.64 95.5238 148.37 137.644 123.97C163.705 101.458 206.375 123.154 258.089 59.6035Z" fill="blue"/>
<path d="M448.323 394.788C427.389 384.661 420.75 356.279 420.047 343.354C441.009 284.421 527.63 350.762 528.167 368.218C528.703 385.674 474.491 407.447 448.323 394.788Z" fill="red"/>
</svg>
推荐阅读
- azure - 获取 Azure Linux 虚拟机来宾操作系统内存指标
- c - C 语言中的差异:*source++、(*source)++、*(source)++
- visual-studio-code - 折叠文件打开 vscode 上的所有注释块。在文件打开时运行命令或任务
- javascript - 在 React Native 中传递 ref 时正确的 PropTypes 类型
- python - 如何在django rest框架中访问父模型中的子完整记录
- java - 使用 Java 从 NFS 读取文件内容
- python - 文本挖掘:查询搜索
- java - 使用 ConditionalOnCloudPlatform 注解测试 spring 配置
- c - 是否会选择在放入 fd_set 之前已关闭的描述符?
- reactjs - 将类组件改造为钩子函数组件