《茉》小播svg版

马黑黑 · 发表于 2024-9-30 11:02

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

效果：

SVG代码：

马黑黑 · 发表于 2024-9-30 11:03

一楼完整源码

<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>

马黑黑 · 发表于 2024-9-30 11:12

二楼代码修改简要说明：

20~24行：defs标签内的分组标签 g 是画了一个小圆，小圆的颜色等属性在这里添加；如果画别的，就用别的标签取代 circle 标签，这样可以得到不同粒子形状的效果；

25行：使用 use 标签实例化 id="circle" 的 g 分组对象，即小圆。这是最中心的那个小圆；

34~45行：mkCircles() 函数，参数三个，依次是粒子圈数（从圆心往外扩展的粒子圈数）、粒子条数（列，从中心到圆周点的直线）和父元素对象（svg）。函数绘制了svg里的粒子，貌似没有改动的地方；

47行：执行函数；

48行：显示svg完整代码。