让svg粒子自适应帖子容器尺寸
<p>核心是给 svg 标签设置宽高比与帖子容器宽高比一致的 viewbox 属性值，viewbox 属性中的起始坐标值取 viewbox 中宽高值一半的负值（便于后续计算），然后在 viewbox 设置的作画范围内绘制图像。应用实例是帖子《不朽》，不过由于该帖svg粒子处于运动中，做的时候没有严格按照本文的实现思路去做，有点随意，下面的粒子则能随机分布于帖子容器的范围内，保持粒子不会跨界。</p><div class="codebox" data-prev="1">
<style>
<txt-green>/* 帖子容器宽高比例 16/9*/</txt-green>
#papa {
margin: 20px auto;
width: 1280px;
height: 720px;
border: 1px solid gray;
position: relative;
}
#msvg {
position: absolute;
}
</style>
<div id="papa">
<txt-green><!-- svg宽高设为容器宽高 --></txt-green>
<svg id="msvg" width="100%" height="100%" viewbox="-320 -180 640 360"></svg>
</div>
<script type="module">
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = Dr.dr(msvg);
<txt-green>// 绘制50个小球 : 圆心坐标、半径、颜色随机</txt-green>
Array.from({length: 50}).forEach(() => {
<txt-green>// 圆心X坐标 : 320 - 最大半径10，圆心Y坐标 : 180 - 最大半径10</txt-green>
var cx = Math.round(Math.random() * 310 * (Math.random() > 0.5 ? 1 : -1)),
cy = Math.round(Math.random() * 170 * (Math.random() > 0.5 ? 1 : -1)),
r = Math.round(Math.random() * 5) + 5, // 最大半径9.999999
color = '#' + Math.random().toString(16).substring(2, 8);
dr.circle(cx,cy,r,color); <txt-green>// 画圆</txt-green>
});
</script>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script> 粒子半径 r 的设置：
r = Math.round(Math.random() * 5) + 5, // 最大半径9.999999
最大值接近10，但由于帖子的尺寸高出几倍，粒子的半径也跟着变大。所以，根据需要可以设置算式，比如你希望最大半径接近5，最小半径不低于2，则：
r = Math.round(Math.random() * 3) + 2, // 最大半径4.999999 哦，这样就能让粒子随机分布在帖子的任意地方了{:4_187:} 红影 发表于 2025-8-24 12:59
哦，这样就能让粒子随机分布在帖子的任意地方了
对，随机 马黑黑 发表于 2025-8-24 13:09
对，随机
嗯嗯，随机的也是好看的。 红影 发表于 2025-8-24 13:51
嗯嗯，随机的也是好看的。
有时候会重叠 随意点几次，每次出现的形状都不相同。。。
看是计算好了让它们不出界，很听话。。
产要是写算法的人厉害{:4_173:} 花飞飞 发表于 2025-8-24 19:56
随意点几次，每次出现的形状都不相同。。。
看是计算好了让它们不出界，很听话。。
产要是写算法的人厉害 ...
一切设计在范围内，位置则随机变化 马黑黑 发表于 2025-8-24 17:50
有时候会重叠
运动时不怕重叠，运动速率不一样，有滞后，所以还是会分开的。 红影 发表于 2025-8-24 22:12
运动时不怕重叠，运动速率不一样，有滞后，所以还是会分开的。
就是这个道理 马黑黑 发表于 2025-8-24 22:58
就是这个道理
重叠的还是不多的。 红影 发表于 2025-8-24 23:24
重叠的还是不多的。
重叠也没关系 马黑黑 发表于 2025-8-24 21:24
一切设计在范围内，位置则随机变化
今天的实例又看到了。。闪烁效果真漂亮 花飞飞 发表于 2025-8-25 15:52
今天的实例又看到了。。闪烁效果真漂亮
这是很简单的实现机制 马黑黑 发表于 2025-8-25 19:44
这是很简单的实现机制
效果好就好，一直喜欢这个呼吸灯效果，跟东西活了一样 花飞飞 发表于 2025-8-25 20:30
效果好就好，一直喜欢这个呼吸灯效果，跟东西活了一样
明天做一个变大变小的 马黑黑 发表于 2025-8-25 14:43
重叠也没关系
的确，影响不大的。 马黑黑 发表于 2025-8-25 21:02
明天做一个变大变小的
双手双脚支持。。。{:4_205:} 花飞飞 发表于 2025-8-26 12:21
双手双脚支持。。。
还没动手 马黑黑 发表于 2025-8-26 12:22
还没动手
没动手也支持。。你说了就会做的。{:4_173:}