Illuminati

马黑黑

马黑黑

<style> @import 'https://638183.freep.cn/638183/web/css/tz01.css'; #pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/small/2025/sha.webp') no-repeat center/cover; --per: 15px; --ma-size: 25%; } #ma { display: block; } #btnFs { bottom: 20px; color: #eee; border-color: currentColor; } </style> <div id="pa"> <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2639639788" autoplay loop></audio> <video class="pd-vid" src="https://img.tukuppt.com/video_show/2629112/00/01/92/5b4d867a105c9.mp4" autoplay loop muted></video> <svg id="ma" class="grayscale" viewbox="-200 -200 400 400"></svg> </div> <script type="module"> import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js'; import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js'; var dr = Dr.dr(ma); var tt = 12, d = 'M0 0 L-30 -200 Q0 -50,30 -200, L0 0'; Array.from({length: tt}).forEach((_,k) => { dr.path(d, 'cyan', 'teal', 2).transform(`rotate(${360/tt*k})`); }); FS(pa, ma); </script>

马黑黑

小播完整SVG代码

1. <svg id="msvg" xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewbox="-200 -200 400 400">
   
2.         <path d="M0 0 L-30 -200 Q0 -50,30 -200, L0 0" fill="cyan" stroke="teal" stroke-width="2" transform="rotate(0)"></path>
   
3.         <path d="M0 0 L-30 -200 Q0 -50,30 -200, L0 0" fill="cyan" stroke="teal" stroke-width="2" transform="rotate(30)"></path>
   
4.         <path d="M0 0 L-30 -200 Q0 -50,30 -200, L0 0" fill="cyan" stroke="teal" stroke-width="2" transform="rotate(60)"></path>
   
5.         <path d="M0 0 L-30 -200 Q0 -50,30 -200, L0 0" fill="cyan" stroke="teal" stroke-width="2" transform="rotate(90)"></path>
   
6.         <path d="M0 0 L-30 -200 Q0 -50,30 -200, L0 0" fill="cyan" stroke="teal" stroke-width="2" transform="rotate(120)"></path>
   
7.         <path d="M0 0 L-30 -200 Q0 -50,30 -200, L0 0" fill="cyan" stroke="teal" stroke-width="2" transform="rotate(150)"></path>
   
8.         <path d="M0 0 L-30 -200 Q0 -50,30 -200, L0 0" fill="cyan" stroke="teal" stroke-width="2" transform="rotate(180)"></path>
   
9.         <path d="M0 0 L-30 -200 Q0 -50,30 -200, L0 0" fill="cyan" stroke="teal" stroke-width="2" transform="rotate(210)"></path>
   
10.         <path d="M0 0 L-30 -200 Q0 -50,30 -200, L0 0" fill="cyan" stroke="teal" stroke-width="2" transform="rotate(240)"></path>
    
11.         <path d="M0 0 L-30 -200 Q0 -50,30 -200, L0 0" fill="cyan" stroke="teal" stroke-width="2" transform="rotate(270)"></path>
    
12.         <path d="M0 0 L-30 -200 Q0 -50,30 -200, L0 0" fill="cyan" stroke="teal" stroke-width="2" transform="rotate(300)"></path>
    
13.         <path d="M0 0 L-30 -200 Q0 -50,30 -200, L0 0" fill="cyan" stroke="teal" stroke-width="2" transform="rotate(330)"></path>
    
14. </svg>

复制代码

杨帆

试了一下这个可以，看来对完整SVG代码才可用介绍的路径适配svg尺寸的方法

花飞飞

这个小播好看，内弧形的，看代码是一个叶片一个叶片画出来的。。每个叶片从00开始，最后都回到了原点。
小播在触碰后一贯的颜色发生变化，像是被挠了痒痒

花飞飞

不对，小播叶片是自动生成的，先画一个再通过计算得出别的。。
23-26这几行代码对应三楼那么长一串，数学之美，代码简洁效果美观。。

花飞飞

-200 -200 400 400这句用上了，保证原点在画布中心，现在知道这样设置不是随意就可以被替代的。。

花飞飞

背景是立了个规矩看到了，整个布置都很规矩
display: block; 特特给出一列，别的贴子里好象没看到它。。是为了跟viewbox配套用的吧

马黑黑

花飞飞 发表于 2025-8-23 21:21
背景是立了个规矩看到了，整个布置都很规矩
display: block; 特特给出一列，别的贴子里好象没看 ...

#ma 选择器在本帖是SVG标签，svg是行内元素，如果不把它设置为块状元素，很可能它不听使唤。

马黑黑

花飞飞 发表于 2025-8-23 21:17
-200 -200 400 400这句用上了，保证原点在画布中心，现在知道这样设置不是随意就可以被替代的。。

即使不使用 -200 -200 原点坐标值也是可以的，在设计图案的时候和它配套就成。

马黑黑

杨帆 发表于 2025-8-23 21:08
试了一下这个可以，看来对完整SVG代码才可用介绍的路径适配svg尺寸的方法

就是要配套：所绘制的图像或路径是基于什么样的 viewbox 就对应给svg设置这个属性

马黑黑

花飞飞 发表于 2025-8-23 21:14
不对，小播叶片是自动生成的，先画一个再通过计算得出别的。。
23-26这几行代码对应三楼那么长一串，数学 ...

Array遍历循环那一句，一口气画出 tt 个路径，每个路径都依据自己的角度做旋转。

svg 的旋转是基于左上角坐标点的，viewbox 重新设置了坐标点，在svg画布的中心。

如果没有 viewbox 设置，那么，在400*400的画布上绕画布的中心旋转，需要这么设置：

transform=“rotate(角度值, 200, 200)"

若 viewbox 属性恰好能将原点坐标移到了 0 0，则上述语句可以简写成：

transform=“rotate(角度值)"

因为 0 0 是原点，svg默认也是绕 0 0 做旋转或其它转换动作

红影

这小播好漂亮，每一个叶瓣都那么修长飘逸，和背景结合很好

红影

这小播代码很简洁，体现了JS的强大，如果用svg一个个去画要麻烦多了

马黑黑

红影 发表于 2025-8-23 22:04
这小播好漂亮，每一个叶瓣都那么修长飘逸，和背景结合很好

这是用 svgdr 设计的

马黑黑

红影 发表于 2025-8-23 22:07
这小播代码很简洁，体现了JS的强大，如果用svg一个个去画要麻烦多了

就是代码量多一点，也没啥

杨帆

马黑黑 发表于 2025-8-23 21:30
就是要配套：所绘制的图像或路径是基于什么样的 viewbox 就对应给svg设置这个属性

对这种svg动态生成版，如何配套呢？

马黑黑

杨帆 发表于 2025-8-23 22:17
对这种svg动态生成版，如何配套呢？

那不一样的吗？

<svg ... viewbox="..."></svg>

所设计的路径或要绘制的图案，使用 viewbox 规定的数据即可

红影

马黑黑 发表于 2025-8-23 22:14
这是用 svgdr 设计的

这个设计漂亮

红影

马黑黑 发表于 2025-8-23 22:14
就是代码量多一点，也没啥

当然是代码少了更好啊，那么多重复的设置，JS一句话就搞定