这个貌似也不错

马黑黑 · 发表于 2024-11-16 20:52

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

SVG代码

<svg id="msvg" width="300" height="300">
	<marker id="m1" markerWidth="5" markerHeight="5" refX="2.5" refY="2.5">
		<circle cx="2.5" cy="2.5" r="2.5" fill="tan"></circle>
	</marker>
	<path d="M150 150L290.00 150.00 Q150 150,257.25 239.99 L150 150L257.25 239.99 Q150 150,174.31 287.87 L150 150L174.31 287.87 Q150 150,80.00 271.24 L150 150L80.00 271.24 Q150 150,18.44 197.88 L150 150L18.44 197.88 Q150 150,18.44 102.12 L150 150L18.44 102.12 Q150 150,80.00 28.76 L150 150L80.00 28.76 Q150 150,174.31 12.13 L150 150L174.31 12.13 Q150 150,257.25 60.01 L150 150L257.25 60.01 Q150 150,290.00 150.00 L150 150L290.00 150.00 Q150 150,257.25 239.99 L150 150" fill="pink" stroke="tan" stroke-width="2" marker-mid="url(#m1)"></path>
</svg>

马黑黑 · 发表于 2024-11-16 20:55

svg绘制代码（可到这里运行 svgdr online）

var tt = 9, R = 150, r = 140, a = 360 / tt, rad = Math.PI / 180 * a, pstr = 'M150 150';
for(var i = 0; i <= tt; i ++) {
	var x1 = R + r * Math.cos(rad * i), x2 = R + r * Math.cos(rad * (i + 1)),
		y1 = R + r * Math.sin(rad * i), y2 = R + r * Math.sin(rad * (i + 1));
	pstr += `L${x1.toFixed(2)} ${y1.toFixed(2)} Q150 150,${x2.toFixed(2)} ${y2.toFixed(2)} L150 150`;
}
dr.marker('m1', 5, 5, 2.5, 2.5);
dr.circle(2.5,2.5,2.5,'tan').addTo('m1');
dr.path(pstr, 'pink', 'tan', 2).set('marker-mid', 'url(#m1)');

泡沫 · 发表于 2024-11-16 21:02

本帖最后由泡沫于 2024-11-16 21:24 编辑

果然每天除了正片，还都有漂亮的花絮。。

这把伞可以合起来

泡沫 · 发表于 2024-11-16 21:04

之前那个效果，中间没有伞骨，这里有伞骨。。
白老师又制作成数量可以变化，最喜欢这种灵活变化的小播了。。

马黑黑 · 发表于 2024-11-16 21:15

泡沫发表于 2024-11-16 21:04
之前那个效果，中间没有伞骨，这里有伞骨。。
白老师又制作成数量可以变化，最喜欢这种灵活变化的小播了。 ...

这个用路径实现

泡沫 · 发表于 2024-11-16 21:18

set('marker-mid', 'url(#m1)');
这个路径的标记mid，乍一看没太明白为什么是标记在连接点处，
现在明白应该是整个弧线为一条线，突出的部分就是连接点处用圆形标记，就出现以上效果了。
中间的圆是另外画上去的。。

泡沫 · 发表于 2024-11-16 21:26

马黑黑发表于 2024-11-16 20:55
svg绘制代码（可到这里运行 svgdr online）

var tt = 9, R = 150, r = 140, a = 360 / tt, rad = Math.P ...

这楼里的算法自动跳过。

泡沫 · 发表于 2024-11-16 21:33

马黑黑发表于 2024-11-16 21:15
这个用路径实现

看到了，还是生态路径，根据数量自动计算的

马黑黑 · 发表于 2024-11-16 21:34

泡沫发表于 2024-11-16 21:33
看到了，还是生态路径，根据数量自动计算的

其实万变不离其宗

马黑黑 · 发表于 2024-11-16 21:35

泡沫发表于 2024-11-16 21:26
这楼里的算法自动跳过。

跳过就算不出了

泡沫 · 发表于 2024-11-16 21:38

马黑黑发表于 2024-11-16 21:34
其实万变不离其宗

你看一眼板凳上合起来的那把伞呗

泡沫 · 发表于 2024-11-16 21:38

马黑黑发表于 2024-11-16 21:35
跳过就算不出了

算的烧脑的就算了

马黑黑 · 发表于 2024-11-16 21:40

泡沫发表于 2024-11-16 21:18
set('marker-mid', 'url(#m1)');
这个路径的标记mid，乍一看没太明白为什么是标记在连接点处，
现在明白 ...

marker标记，作用对象使用 marker-mid 的时候，在路径的任何一个连接点都产生作用。

这个路径是复合路径，每一个单元是酱紫：从svg中心点发起，画一条直线到 (x1, y1)，画一条二次贝塞尔曲线到 (x2, y2)，画一条直线到中心 (x, y)，因此每个个单元存在三个连接点，所以最终结果是，中心点也有标记。