请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
核心是给 svg 标签设置宽高比与帖子容器宽高比一致的 viewbox 属性值，viewbox 属性中的起始坐标值取 viewbox 中宽高值一半的负值（便于后续计算），然后在 viewbox 设置的作画范围内绘制图像。应用实例是帖子《不朽》，不过由于该帖svg粒子处于运动中，做的时候没有严格按照本文的实现思路去做，有点随意，下面的粒子则能随机分布于帖子容器的范围内，保持粒子不会跨界。
<style>
/* 帖子容器宽高比例 16/9 */
#papa {
margin: 20px auto;
width: 1280px;
height: 720px;
border: 1px solid gray;
position: relative;
}
#msvg {
position: absolute;
}
</style>
<div id="papa">
<!-- svg宽高设为容器宽高 -->
<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);
// 绘制50个小球 : 圆心坐标、半径、颜色随机
Array.from({length: 50}).forEach(() => {
// 圆心X坐标 : 320 - 最大半径10，圆心Y坐标 : 180 - 最大半径10
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); // 画圆
});
</script>
| 
发表于 2025-8-24 11:20
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2025-8-24 19:56
