svg绘制花朵

马黑黑

代码：

<style>
	svg { background: #222; border-radius: 50%; }
</style>

<svg width="300" height="300" viewBox ="0 0 200 200">
	<defs>
		<radialGradient id="flower">
			<stop offset="0%" stop-color="red" />
			<stop offset="20%" stop-color="orange" />
			<stop offset="25%" stop-color="lightblue" />
		</radialGradient>
	</defs>
	<path d="M100 90
		A10 20 -30 1 0 91.5 95
		A10 20 -90 1 0 91.5 105
		A10 20 -150 1 0 100 110
		A10 20 150 1 0 108.5 105
		A10 20 90 1 0 108.5 95
		A10 20 30 1 0 100 90"
	fill="url(#flower)" />
</svg>

运行代码

注：本例使用 path 路径完成。

红影

学习黑黑带来的新知识

马黑黑

醉美水芙蓉 发表于 2023-5-29 21:45
这个我不太懂，欣赏一下吧！

路径都是用数字说话，有点抽象

马黑黑

红影 发表于 2023-5-29 21:55
学习黑黑带来的新知识

晚上嚎

红影

马黑黑 发表于 2023-5-29 22:35
路径都是用数字说话，有点抽象

这个路径里加上了角度。

马黑黑

红影 发表于 2023-5-30 11:08
这个路径里加上了角度。

只是A指令的组合。A指令的第三个参数与旋转角度有关。

南无月

纯数字变花朵，神奇

马黑黑

南无月 发表于 2023-5-30 18:00
纯数字变花朵，神奇

路径就是数字描述的。如果你愿意，你可以不用其他指令，全用数字来描述每一点的xy坐标，那样，路径数字会是很长很长的一串。

红影

马黑黑 发表于 2023-5-30 12:03
只是A指令的组合。A指令的第三个参数与旋转角度有关。

是的，看惯了010之类的组合，看到角度还不太适应呢

马黑黑

红影 发表于 2023-5-30 19:26
是的，看惯了010之类的组合，看到角度还不太适应呢

0 1 0 的第一个 0 ，就是A指令的第三个参数，表示旋转角度，0 表明不旋转，30表示旋转30度。

南无月

马黑黑 发表于 2023-5-30 18:03
路径就是数字描述的。如果你愿意，你可以不用其他指令，全用数字来描述每一点的xy坐标，那样，路径数字会 ...

这得达到老师的水平才能这么整

马黑黑

南无月 发表于 2023-5-30 21:00
这得达到老师的水平才能这么整

还是用机器生成吧

南无月

马黑黑 发表于 2023-5-30 21:20
还是用机器生成吧

AI用起来呀

马黑黑

南无月 发表于 2023-5-30 21:24
AI用起来呀

你的PS就能生成路径代码

红影

马黑黑 发表于 2023-5-30 19:28
0 1 0 的第一个 0 ，就是A指令的第三个参数，表示旋转角度，0 表明不旋转，30表示旋转30度。

而且只要输入数字，不需要写单位呢。能这样写出6个花瓣，也很不容易的。

马黑黑

红影 发表于 2023-5-30 21:55
而且只要输入数字，不需要写单位呢。能这样写出6个花瓣，也很不容易的。

如果你会PS，那么，你做一个图案，然后可以让PS为你生成路径代码

红影

马黑黑 发表于 2023-5-30 22:17
如果你会PS，那么，你做一个图案，然后可以让PS为你生成路径代码

不会PS也行，网上有在线找路径的，更方便

马黑黑

红影 发表于 2023-5-30 23:17
不会PS也行，网上有在线找路径的，更方便

比如？

红影

马黑黑 发表于 2023-5-30 23:20
比如？

某个SVG路径就直接能给出路径代码，不会PS也行啊。那个地址在家里电脑上收，这个电脑上没有