马黑黑 发表于 2026-5-14 19:58

svgdr : 让 rotates 图标随机着色

<svg id="msvg" width="300" height="300" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400"></svg>

<script>
function loadJs(url, callback) {
    var script = document.createElement('script');
    script.charset = 'utf-8';
    script.src = url;
    script.onload = function() {
      if (callback) callback();
    };
    document.head.appendChild(script);
}

function drRun() {
    var dr = _dr(msvg);

    dr.path('M0 -190Q-50 0,0 190Q50 0,0 -190Z', 'transparent', 'green', 5).rotates(9,180);

    const setPathStroke = () => {
      const paths = msvg.querySelectorAll('path');
      paths.forEach(path => {
      path.setAttribute('stroke', `#${Math.random().toString().substring(2,8)}`);
      });
    };

    setPathStroke();
}

loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', drRun);
</script>

马黑黑 发表于 2026-5-14 19:59

一楼代码：

<svg id="msvg" width="300" height="300" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400"></svg>

<script>
function loadJs(url, callback) {
    var script = document.createElement('script');
    script.charset = 'utf-8';
    script.src = url;
    script.onload = function() {
      if (callback) callback();
    };
    document.head.appendChild(script);
}

function drRun() {
    var dr = _dr(msvg);

    dr.path('M0 -190Q-50 0,0 190Q50 0,0 -190Z', 'transparent', 'green', 5).rotates(9,180);

    const setPathStroke = () => {
      const paths = msvg.querySelectorAll('path');
      paths.forEach(path => {
      path.setAttribute('stroke', `#${Math.random().toString().substring(2,8)}`);
      });
    };

    setPathStroke();
}

loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', drRun);
</script>

马黑黑 发表于 2026-5-14 20:00

核心：setPathStroke() 函数

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

红影 发表于 2026-5-14 20:48

每刷新一次就是新的颜色呢，每一瓣的颜色还各不相同，漂亮{:4_187:}

霜染枫丹 发表于 2026-5-14 21:42

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

马黑黑 发表于 2026-5-14 22:23

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

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

小辣椒 发表于 2026-5-14 22:35

又一个小播{:4_199:}

马黑黑 发表于 2026-5-15 18:34

小辣椒 发表于 2026-5-14 22:35
又一个小播

{:4_180:}
页: [1]
查看完整版本: svgdr : 让 rotates 图标随机着色