马黑黑 发表于 2026-8-18 07:49

svgdr path+rotaes 指令绘制多叶草

<style>
    @import 'https://638183.freep.cn/638183/web/css/hl.css';
    .artBox { margin: 20px auto; font: normal 18px/26px sans-serif; }
    .artBox p { margin: 10px 0; }
    .artBox pre { white-space: pre-wrap; tab-size: 4; }
    .artBox mark { background: rgba(0, 120, 0, 0.35); padding: 2px 6px; }
</style>

<div class="artBox">
    <p>svgdr 有专门的绘制多叶草指令 <mark>clover</mark>，但绘制多叶草还有更多的实现方法。本帖展示使用 <mark>path + rotates</mark> 指令制作多叶草图案。</p>
    <h3>一、效果：</h3>
    <svg id="msvg" width="400" height="400" viewBox="-200 -200 400 400" xmlns="http://www.w3.org/2000/svg"></svg>
    <p>【附】svgdr 生成的代码：</p>
    <pre id="svgcode" class="hlCode"></pre>
   
    <h3>二、核心svgdr代码：</h3>
    <pre class="hlCode">dr.path('M0 -190 Q60 -160,0 0 T0 190 Q60 160,0 0 T0 -190', 'green', 'pink', 2).rotates(3, 180);</pre>
    <p>代码解析：SVG viewBox 设为 -200 -200 400 400</p>
    <ol>
      <li>使用 path 指令绘制第一条Q曲线+T延长曲线：Q曲线起点在画布正上方(0,-190)，终点在中心(0,0)，控制点在(60,-160)，然后T曲线将其延长至正下方(0,190)；第二条Q曲线+T延长曲线紧接着绘制，以上一条曲线的终点为起点，Q曲线终点仍是(0,0)，控制点Y坐标与上一条Q曲线反向(60,160)，T延长线终点 是上一条Q曲线的起点，形成闭合。</li>
      <li>给曲线上色，fill和stroke设置好合适的颜色，同时设置好 stroke-width 描边宽度。</li>
      <li>链式调用 rotates 指令复制已绘制好的曲线路径并进行旋转，共3条（含第一个路径），旋转角度范围是180度。</li>
    </ol>
    <p> <br></p>
    <h3>三、完整svgdr代码：</h3>
    <pre class="hlCode">
&lt;svg id="msvg" widt="400" height="400" viewBox="-200 -200 400 400"&gt;&lt;/svg&gt;

&lt;script charset="utf-8" src="https://638183.freep.cn/638183/svgdr/svgdr.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
    var dr = _dr(msvg);
    dr.path('M0 -190 Q60 -160,0 0 T0 190 Q60 160,0 0 T0 -190', 'green', 'pink', 2).rotates(3, 180);
&lt;/script&gt;
</pre>
</div>

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

    function tzRun() {
      var dr = _dr(msvg);
      dr.path('M0 -190 Q60 -160,0 0 T0 190 Q60 160,0 0 T0 -190', 'green', 'pink', 2).rotates(3, 180);
      svgcode.innerText = dr.code(msvg);
    }

    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);
    }
</script>

霜染枫丹 发表于 2026-8-18 08:09

马老师上午好~~

这组代码特别试用，我试了，很灵活，能够达到很多种效果，赶紧抱走留存！
谢谢马老师分享！秋安！{:4_204:}{:4_190:}

小文 发表于 2026-8-18 09:14

感恩先生此贴，学习。问好！

马黑黑 发表于 2026-8-18 19:51

小文 发表于 2026-8-18 09:14
感恩先生此贴，学习。问好！

晚上好！

马黑黑 发表于 2026-8-18 19:52

霜染枫丹 发表于 2026-8-18 08:09
马老师上午好~~

这组代码特别试用，我试了，很灵活，能够达到很多种效果，赶紧抱走留存！


这个东东，其实就是当年你辅导孩子做数学作业的知识{:4_170:}

霜染枫丹 发表于 2026-8-18 20:02

马黑黑 发表于 2026-8-18 19:52
这个东东，其实就是当年你辅导孩子做数学作业的知识

我辅导不了多少，就是看着做样子吓唬一下{:4_173:}

我试了好几种样式，比我用ps简便多了，而且改变数据就OK,若制作天女散花的那些花，有了您这个办法，再把您那个乱转的轨道给嚯嚯的拆解一下，飘多远都顺畅！我觉的太好用了，用绘声绘影的路径，用FLASH的随便画都行，关键是标的物制作起来太好用了，就像您的那条丑鱼{:4_204:}{:4_190:}

马黑黑 发表于 2026-8-19 19:44

霜染枫丹 发表于 2026-8-18 20:02
我辅导不了多少，就是看着做样子吓唬一下

我试了好几种样式，比我用ps简便多了，而且改变数 ...

想象力丰富
页: [1]
查看完整版本: svgdr path+rotaes 指令绘制多叶草