svg曲线绕圈动态图案

马黑黑

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

马黑黑

use 标签，用于实例化 g 分组：

先说说 g 分组，g 分组是将一个或多个静态或动态图案分成一组，它是可以显示的，所以要使用 defs 标签将其包裹起来，这样只有实例化它时它才会显示。

再说说 use 标签，该标签通过 xlink:href="id" 方式引用 g 分组、将其实例化显示出来，xlink:href 是过时的写法，可以直接写成 href="id"。use标签可以拥有自己的 x、y 定位属性，缺省、默认为 x="0" y="0"，还有其他相关属性，比如本例的 transform 转换属性。

红影

这个太美了，做一条曲线，然后把它们一个个转度数，就能组合成这么漂亮的图案啊

红影

因为是中心散发两边都有，所以平分180度就够了，不用360呢

红影

这个太美了

马黑黑

红影 发表于 2024-9-30 23:06
这个太美了，做一条曲线，然后把它们一个个转度数，就能组合成这么漂亮的图案啊

曲线路径可以设计成不同的样式，可能效果更好

马黑黑

红影 发表于 2024-9-30 23:14
因为是中心散发两边都有，所以平分180度就够了，不用360呢

多了就重叠了

小辣椒

这个更加漂亮了

马黑黑

小辣椒 发表于 2024-10-1 00:34
这个更加漂亮了

国庆快乐

起个网名好难

学习模仿一个

梦江南

真漂亮！

梦江南

祝老师国庆节快乐！

马黑黑

梦江南 发表于 2024-10-1 08:25
祝老师国庆节快乐！

同乐同乐

红影

马黑黑 发表于 2024-9-30 23:16
曲线路径可以设计成不同的样式，可能效果更好

是啊，我记得你有三次贝塞尔曲线在线设计的帖子，可以去试着弄个不一样的

红影

哦，这个是二次贝塞尔曲线呢，看到这形状，想当然地以为是三次，没去留意里面的符号

红影

起个网名好难 发表于 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的过渡，刚才赶紧又去学习了一下

红影

马黑黑 发表于 2024-10-1 13:40
曲线、弧线都是可以大有作为的

也是哦，可以做个弧从端点做360度划分，应该也很好看。