svgdr : 让 rotates 图标随机着色

马黑黑

马黑黑

一楼代码：

1. <svg id="msvg" width="300" height="300" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400"></svg>
   
2. 
   
3. <script>
   
4.   function loadJs(url, callback) {
   
5.     var script = document.createElement('script');
   
6.     script.charset = 'utf-8';
   
7.     script.src = url;
   
8.     script.onload = function() {
   
9.       if (callback) callback();
   
10.     };
    
11.     document.head.appendChild(script);
    
12.   }
    
13.   
    
14.   function drRun() {
    
15.     var dr = _dr(msvg);
    
16. 
    
17.     dr.path('M0 -190Q-50 0,0 190Q50 0,0 -190Z', 'transparent', 'green', 5).rotates(9,180);
    
18. 
    
19.     const setPathStroke = () => {
    
20.       const paths = msvg.querySelectorAll('path');
    
21.       paths.forEach(path => {
    
22.         path.setAttribute('stroke', `#${Math.random().toString().substring(2,8)}`);
    
23.       });
    
24.     };
    
25. 
    
26.     setPathStroke();
    
27.   }
    
28.   
    
29.   loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', drRun);
    
30. </script>

复制代码

马黑黑

核心：setPathStroke() 函数

它会获取 id="msvg" SVG标签的所有路径，然后为每一个路径的 stroke 属性随机着色。

红影

没刷新一次就是新的颜色呢，每一瓣的颜色还各不相同，漂亮

霜染枫丹

很漂亮的色彩！在FULASH时期有一种鼠标动画，点击一次变一个，很多人用来做头像，那是通过软件很好操作，代码对我还是神秘了

马黑黑

霜染枫丹 发表于 2026-5-14 21:42
很漂亮的色彩！在FULASH时期有一种鼠标动画，点击一次变一个，很多人用来做头像，那是通过软件很好操作，代 ...

随机是很常见的功能，包括颜色、长短、高低等等，都可以随机化

小辣椒

又一个小播