svg图案：猜猜有多少根绳子

马黑黑

代码：

马黑黑

单个单元的路径样式：

以上用A指令绘制了两个椭圆弧线，一个优弧（大弧）和一个劣弧（小弧）：

优弧（大弧）：

劣弧（小弧）：

优弧和劣弧路径代码：

<path d="M150 200 A70 100 0 1 1 250 200"></path>
<path d="M150 200 A70 100 0 0 1 250 200"></path>

A指令七个参数中第四个参数值为 1 是优弧（大弧）、值为 0 是劣弧（小弧）。七个指令以及相关内容解释如下：

A指令参数：

① rx ② ry ③ x-axis-rotation ④ large-arc-flag ⑤ sweep-flag ⑥ x ⑦ y

① rx ：椭圆弧水平半径
② ry ：椭圆弧垂直半径
③ x-axis-rotation ：椭圆弧相对于X坐标的旋转角度（非弧度）
④ large-arc-flag ：大弧（1）还是是小弧（0）
⑤ sweep-flag ：绘制方向是顺时针（1）还是逆时针（0）
⑥ x ：椭圆弧终点X坐标
⑦ y ：椭圆弧终点Y坐标

绘制椭圆弧 path 路径 d 属性值赋值语法：

<path d="M x1 y1 A rx ry x-axis-rotation large-arc-flag sweep-flag x y" fill="none" stroke="red" />

//其中，M x1 y1 是画笔移动到椭圆形的起点XY坐标，fill 和 stroke 是设置填充色和描边色

愤怒的葡萄

路过帮顶贴了。

花飞飞

这个好神的，跟齿轮一样。。乍一看是四个椭圆在转，盲猜应该是一条虚线整成椭圆，变换角度后形成花瓣模样。。
看代码，有两条线组成一个单元，
一个大弧一个小弧，
怎么算的呀，可以接得这么天衣无缝。。

花飞飞

神算子

马黑黑

愤怒的葡萄 发表于 2024-10-3 18:10
路过帮顶贴了。

晚上好

红影

这个很奇特，从单个单元看，优弧和劣弧竟然转动方向不一样。
哦，其实是一样的，都是从起到终。但在单个单元中，看起来优劣各行其是。并不是同步顺时针。

然后，和其他的转动1/4圆的圆弧组装起来，倒是完全同步了，看起来像有四个顺时针的圆环组起来的一样。
这太神奇了

红影

这些圆弧就这么用别人的劣弧和自己的优弧组装了，给出了整个顺时针选装的整个椭圆的错觉。奇妙

红影

还有更奇怪的，当
<path d="M150 200 A70 100 0 1 1 250 200"></path>
这个值小于等于50，就变成了两个椭圆，这是咋回事
我再想想。。。。

红影

哦，我知道了，小于等于50时，优劣弧重合了

红影

看到黑黑设置fill: rgba(100,100,0,.35);
估计让我们体会颜色填充的奇妙之处吧。
先不说4个组合的，就是单个元素，劣弧填充也被多填了一层，这个也很奇特

马黑黑

红影 发表于 2024-10-3 19:32
这个很奇特，从单个单元看，优弧和劣弧竟然转动方向不一样。
哦，其实是一样的，都是从起到终。但在单个单 ...

更多的解释在二楼，已经写好了

马黑黑

红影 发表于 2024-10-3 19:39
还有更奇怪的，当

这个值小于等于50，就变成了两个椭圆，这是咋回事

因为优弧劣弧大小一样。A指令本身画的就是圆弧的一部分。

马黑黑

红影 发表于 2024-10-3 19:38
这些圆弧就这么用别人的劣弧和自己的优弧组装了，给出了整个顺时针选装的整个椭圆的错觉。奇妙

是的吧？这得用火星人的思维方式去思考

马黑黑

花飞飞 发表于 2024-10-3 18:52
这个好神的，跟齿轮一样。。乍一看是四个椭圆在转，盲猜应该是一条虚线整成椭圆，变换角度后形成花瓣模样。 ...

眼光还是挺犀利的

马黑黑

花飞飞 发表于 2024-10-3 18:53
神算子

那是李来群

马黑黑

红影 发表于 2024-10-3 19:41
看到黑黑设置fill: rgba(100,100,0,.35);
估计让我们体会颜色填充的奇妙之处吧。
先不说4个组合的，就是 ...

因为不封闭，优弧和劣弧在填充时，优弧会自封闭，封闭的部分就是劣弧区域。

红影

马黑黑 发表于 2024-10-3 19:42
更多的解释在二楼，已经写好了

那个颜色填充仍然没明白，为什么劣弧被填充两次，
当然正当中被填充多次是知道的，本来就是多次累加，我只是没弄懂单个元素时，貌似劣弧下面的部分也被填充，而且颜色更深。

马黑黑

红影 发表于 2024-10-3 19:50
那个颜色填充仍然没明白，为什么劣弧被填充两次，
当然正当中被填充多次是知道的，本来就是多次累加，我 ...

17楼有解释

小辣椒

代码真的太厉害了，啥都可以做出来