svg曲线绕圈动态图案
<div class="hE"><pre id="pcode"><svg id="player" width="200" height="200" viewBox="0 0 200 200">
<defs>
<g id="p1" fill="none" stroke="green" stroke-width="4" stroke-linecap="round" stroke-dasharray="4 6">
<path id="p1" d="M10 100 Q50 260,100 100 T 190 100">
<animate attributeName="stroke-dashoffset" from="80" to="0" dur="2s" repeatCount="indefinite" />
</path>
</g>
</defs>
<use href="#p1" transform="rotate(0 100 100)"></use>
<use href="#p1" transform="rotate(30 100 100)"></use>
<use href="#p1" transform="rotate(60 100 100)"></use>
<use href="#p1" transform="rotate(90 100 100)"></use>
<use href="#p1" transform="rotate(120 100 100)"></use>
<use href="#p1" transform="rotate(150 100 100)"></use>
</svg>
</pre></div>
<div id="showbox" style="text-align:center;"></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);
showbox.innerHTML = pcode.innerText;
</script>
use 标签，用于实例化 g 分组：
先说说 g 分组，g 分组是将一个或多个静态或动态图案分成一组，它是可以显示的，所以要使用 defs 标签将其包裹起来，这样只有实例化它时它才会显示。
再说说 use 标签，该标签通过 xlink:href="id" 方式引用 g 分组、将其实例化显示出来，xlink:href 是过时的写法，可以直接写成 href="id"。use标签可以拥有自己的 x、y 定位属性，缺省、默认为 x="0" y="0"，还有其他相关属性，比如本例的 transform 转换属性。 这个太美了，做一条曲线，然后把它们一个个转度数，就能组合成这么漂亮的图案啊{:4_199:} 因为是中心散发两边都有，所以平分180度就够了，不用360呢{:4_173:} 这个太美了{:4_199:} 红影 发表于 2024-9-30 23:06
这个太美了，做一条曲线，然后把它们一个个转度数，就能组合成这么漂亮的图案啊
曲线路径可以设计成不同的样式，可能效果更好 红影 发表于 2024-9-30 23:14
因为是中心散发两边都有，所以平分180度就够了，不用360呢
多了就重叠了 这个更加漂亮了{:4_199:} 小辣椒 发表于 2024-10-1 00:34
这个更加漂亮了
国庆快乐 本帖最后由 起个网名好难 于 2024-10-1 20:02 编辑 <br /><br />学习模仿一个<br><br>
<svg width='400' viewBox="0 0 200 200" >
<defs>
<path id="p0" d="M10 100 Q 50 255,100 100 T 190 100" fill="none" stroke-width="2" stroke-linecap="round" stroke-dasharray="4 6">
<animate attributeName="stroke-dashoffset" from="80" to="0" dur="2s" repeatCount="indefinite" />
</path>
</defs>
<use href="#p0" transform="rotate(0 100 100)" stroke="red"></use>
<use href="#p0" transform="rotate(25.714 100 100)" stroke="orange"></use>
<use href="#p0" transform="rotate(51.428 100 100)" stroke="green"></use>
<use href="#p0" transform="rotate(77.142 100 100)" stroke="cyan"></use>
<use href="#p0" transform="rotate(102.856 100 100)" stroke="yellow"></use>
<use href="#p0" transform="rotate(128.57 100 100)" stroke="blue"></use>
<use href="#p0" transform="rotate(154.286 100 100)" stroke="purple"></use>
</svg>
<br><br>
<svg width='500' viewBox="0 0 200 200" >
<defs>
<path id="pp0" d="M10 100 Q 50 255,100 100 T 190 100" fill="none" stroke-width="1" stroke-dasharray="4 6">
<animate attributeName="stroke-dashoffset" from="80" to="0" dur="2s" repeatCount="indefinite" />
</path>
</defs>
<use href="#pp0" transform="rotate(0 100 100)" stroke="hsl(0,80%,50%)"></use>
<use href="#pp0" transform="rotate(30 100 100)" stroke="hsl(60,80%,50%)"></use>
<use href="#pp0" transform="rotate(60 100 100)" stroke="hsl(120,80%,50%)"></use>
<use href="#pp0" transform="rotate(90 100 100)" stroke="hsl(180,80%,50%)"></use>
<use href="#pp0" transform="rotate(120 100 100)" stroke="hsl(240,80%,50%)"></use>
<use href="#pp0" transform="rotate(150 100 100)" stroke="hsl(300,80%,50%)"></use>
</svg>
<br><br>
真漂亮！ 祝老师国庆节快乐！ 梦江南 发表于 2024-10-1 08:25
祝老师国庆节快乐！
同乐同乐 马黑黑 发表于 2024-9-30 23:16
曲线路径可以设计成不同的样式，可能效果更好
是啊，我记得你有三次贝塞尔曲线在线设计的帖子，可以去试着弄个不一样的{:4_173:} 哦，这个是二次贝塞尔曲线呢，看到这形状，想当然地以为是三次，没去留意里面的符号{:4_173:} 起个网名好难 发表于 2024-10-1 08:22
本帖最后由 起个网名好难 于 2024-10-1 09:29 编辑 学习模仿一个
难难这个还是彩色的，厉害。这个貌似看到了一点点端头，是因为没平分180度的缘故么？ 红影 发表于 2024-10-1 13:24
哦，这个是二次贝塞尔曲线呢，看到这形状，想当然地以为是三次，没去留意里面的符号
它带一个T，加了一个平滑的尾巴，所以形状不同于二次贝塞尔曲线；三次则可以带 C 红影 发表于 2024-10-1 13:05
是啊，我记得你有三次贝塞尔曲线在线设计的帖子，可以去试着弄个不一样的
曲线、弧线都是可以大有作为的 马黑黑 发表于 2024-10-1 13:40
它带一个T，加了一个平滑的尾巴，所以形状不同于二次贝塞尔曲线；三次则可以带 C
二次是Q+T做平滑过渡，三次是C+S的过渡，刚才赶紧又去学习了一下{:4_187:} 马黑黑 发表于 2024-10-1 13:40
曲线、弧线都是可以大有作为的
也是哦，可以做个弧从端点做360度划分，应该也很好看。