《茉》小播svg版
<style>#mydiv {
margin: 30px auto;
width: fit-content;
height: fit-content;
outline: 1px dashed gray;
}
#tbox {
width: 720px;
height: 300px;
padding: 10px;
tab-size: 4;
}
.tMid { text-align: center; }
</style>
<h2>效果：</h2>
<div id="mydiv">
<svg width="400" height="400" viewBox="-200 -200 400 400" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="circle">
<circle cx="0" cy="0" r="8" fill="skyblue" stroke="none"/>
</g>
</defs>
<use href="#circle"/>
</svg>
</div>
<h2>SVG代码：</h2>
<p class="tMid"><textarea id="tbox"></textarea></p>
<script>
var msvg = mydiv.querySelector('svg');
mkCircles = (circles, columns, target) => {
let angle = 360 / columns,
sR = target.getAttribute('width') / 2,
outstr = '';
Array(columns).fill('').forEach((_,a) => {
Array(circles).fill('').forEach((_,b) => {
let xx = sR / circles;
outstr += `\t<use href="#circle" transform="rotate(${angle * a}) translate(${b * xx + xx - 10})"/>\n`;
});
});
target.innerHTML += outstr;
};
mkCircles(4,12,msvg);
tbox.value = msvg.outerHTML;
</script>
<h2>一楼完整源码</h2>
<div class="hE"><pre>
<style>
#mydiv {
margin: 30px auto;
width: fit-content;
height: fit-content;
outline: 1px dashed gray;
}
#tbox {
width: 720px;
height: 300px;
padding: 10px;
tab-size: 4;
}
.tMid { text-align: center; }
</style>
<h2>效果：</h2>
<div id="mydiv">
<svg width="400" height="400" viewBox="-200 -200 400 400" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="circle">
<circle cx="0" cy="0" r="8" fill="skyblue" stroke="none"/>
</g>
</defs>
<use href="#circle"/>
</svg>
</div>
<h2>SVG代码：</h2>
<p class="tMid"><textarea id="tbox"></textarea></p>
<script>
var msvg = mydiv.querySelector('svg');
mkCircles = (circles, columns, target) => {
let angle = 360 / columns,
sR = target.getAttribute('width') / 2,
outstr = '';
Array(columns).fill('').forEach((_,a) => {
Array(circles).fill('').forEach((_,b) => {
let xx = sR / circles;
outstr += `\t<use href="#circle" transform="rotate(${angle * a}) translate(${b * xx + xx - 10})"/>\n`;
});
});
target.innerHTML += outstr;
};
mkCircles(4,12,msvg);
tbox.value = msvg.outerHTML;
</script>
</pre></div>
<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/helight/helight.js';
document.body.appendChild(sc);
</script> 二楼代码修改简要说明：
20~24行：defs标签内的分组标签 g 是画了一个小圆，小圆的颜色等属性在这里添加；如果画别的，就用别的标签取代 circle 标签，这样可以得到不同粒子形状的效果；
25行：使用 use 标签实例化 id="circle" 的 g 分组对象，即小圆。这是最中心的那个小圆；
34~45行：mkCircles() 函数，参数三个，依次是粒子圈数（从圆心往外扩展的粒子圈数）、粒子条数（列，从中心到圆周点的直线）和父元素对象（svg）。函数绘制了svg里的粒子，貌似没有改动的地方；
47行：执行函数；
48行：显示svg完整代码。 谢谢老师详细讲解代码。辛苦了！{:4_190:} 祝老师国庆节阖家开心快乐！{:4_187:} 一圈圈往外放射，漂亮。。。 这个是单色的了，弄了12列呢。
这个讲解好，对照着svg代码里的数据，更容易理解js里的设定了{:4_199:} 红影 发表于 2024-9-30 17:35
这个是单色的了，弄了12列呢。
这个讲解好，对照着svg代码里的数据，更容易理解js里的设定了
js负责俺规则绘制，不然这么多代码手写不简单 花飞飞 发表于 2024-9-30 15:59
一圈圈往外放射，漂亮。。。
{:4_180:} 梦江南 发表于 2024-9-30 15:28
祝老师国庆节阖家开心快乐！
节日快乐 这个和《茉》帖子里的好像实现的方法还是不一样的{:4_204:} 马黑黑 发表于 2024-9-30 17:43
js负责俺规则绘制，不然这么多代码手写不简单
是啊，有JS的设计规划，所有的粒子都老老实实站在了规定的位置上了{:4_173:} 红影 发表于 2024-9-30 21:23
是啊，有JS的设计规划，所有的粒子都老老实实站在了规定的位置上了
首先得会手写，才能指挥JS去写 红影 发表于 2024-9-30 17:54
这个和《茉》帖子里的好像实现的方法还是不一样的
差不多的，只是画圆的方式不同，此外这个可以存为 .svg 当图片使用。 马黑黑 发表于 2024-9-30 22:07
首先得会手写，才能指挥JS去写
是的，先知道想得到什么效果，然后用JS 去实现。只是不会指挥它啊{:4_173:} 红影 发表于 2024-9-30 22:13
是的，先知道想得到什么效果，然后用JS 去实现。只是不会指挥它啊
吃透那个 mkCircles() 函数就差不多了，就那么10来行代码 马黑黑 发表于 2024-9-30 22:13
差不多的，只是画圆的方式不同，此外这个可以存为 .svg 当图片使用。
这样的图片没地方上传啊，很多地方不让传。 马黑黑 发表于 2024-9-30 22:15
吃透那个 mkCircles() 函数就差不多了，就那么10来行代码
这个现在还没本事{:4_173:} 红影 发表于 2024-9-30 22:34
这样的图片没地方上传啊，很多地方不让传。
那就直接用代码 红影 发表于 2024-9-30 22:35
这个现在还没本事
没几句是难懂的