svg图案：猜猜有多少根绳子
<style>#stagebox { margin: 30px auto; width: 720px; height: 720px; display: grid; place-items: center; position: relative; }
.svg { border: 1px dashed gray; transform: scale(1.8); }
</style>
<div id="stagebox">
<style>
#arc1 {
stroke-width: 5;
fill: rgba(100,100,0,.35);
stroke: teal;
stroke-dasharray: 5;
animation: flow 5s linear infinite;
}
@keyframes flow {
to { stroke-dashoffset: -300; }
}
</style>
<svg class="svg" width="400" height="400">
<defs>
<g id="arc1">
<path d="M150 200 A70 100 0 1 1 250 200"/>
<path d="M150 200 A70 100 0 0 1 250 200"/>
</g>
</defs>
<line x1="0" y1="50%"x2="100%" y2="50%" stroke="gray" stroke-dasharray="2"/>
<line x1="50%" y1="0"x2="50%" y2="100%" stroke="gray" stroke-dasharray="2"/>
<use href="#arc1" transform="rotate(0 200 200)"></use>
<use href="#arc1" transform="rotate(90 200 200)"></use>
<use href="#arc1" transform="rotate(180 200 200)"></use>
<use href="#arc1" transform="rotate(270 200 200)"></use>
</svg>
</div>
<p>代码：</p>
<div class="hE"><pre id="pre1"></pre></div>
<script>
pre1.textContent = stagebox.innerHTML;
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script>
本帖最后由 马黑黑 于 2024-10-3 19:41 编辑 <br /><br /><p>单个单元的路径样式：<br><br></p>
<svg width="400" height="220" fill="none" stroke="teal" stroke-width="5" stroke-dasharray="5">
<path d="M150 200 A70 100 0 1 1 250 200"></path>
<path d="M150 200 A70 100 0 0 1 250 200"></path>
</svg>
<p>以上用A指令绘制了两个椭圆弧线，一个优弧（大弧）和一个劣弧（小弧）：<br><br></p>
<p>优弧（大弧）：</p>
<svg width="400" height="220" fill="none" stroke="teal" stroke-width="5" stroke-dasharray="5">
<path d="M150 200 A70 100 0 1 1 250 200"></path>
</svg>
<p>劣弧（小弧）：</p>
<svg width="400" height="400" fill="none" stroke="teal" stroke-width="5" stroke-dasharray="5">
<path d="M150 200 A70 100 0 0 1 250 200"></path>
</svg>
<p>优弧和劣弧路径代码：</p>
<div class="hE"><pre>
<path d="M150 200 A70 100 0 1 1 250 200"></path>
<path d="M150 200 A70 100 0 0 1 250 200"></path>
</pre></div>
<p>A指令七个参数中第四个参数值为 1 是优弧（大弧）、值为 0 是劣弧（小弧）。七个指令以及相关内容解释如下：</p>
<div class="hE"><pre>
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 是设置填充色和描边色
</pre></div> 路过帮顶贴了。 这个好神的，跟齿轮一样。。乍一看是四个椭圆在转，盲猜应该是一条虚线整成椭圆，变换角度后形成花瓣模样。。
看代码，有两条线组成一个单元，{:4_173:}
一个大弧一个小弧，
怎么算的呀，可以接得这么天衣无缝。。 神算子 愤怒的葡萄 发表于 2024-10-3 18:10
路过帮顶贴了。
晚上好 这个很奇特，从单个单元看，优弧和劣弧竟然转动方向不一样。
哦，其实是一样的，都是从起到终。但在单个单元中，看起来优劣各行其是。并不是同步顺时针。
然后，和其他的转动1/4圆的圆弧组装起来，倒是完全同步了，看起来像有四个顺时针的圆环组起来的一样。
这太神奇了{:4_199:} 这些圆弧就这么用别人的劣弧和自己的优弧组装了，给出了整个顺时针选装的整个椭圆的错觉。奇妙{:4_187:} 还有更奇怪的，当
<path d="M150 200 A70 100 0 1 1 250 200"></path>
这个值小于等于50，就变成了两个椭圆，这是咋回事{:4_203:}
我再想想。。。。 哦，我知道了，小于等于50时，优劣弧重合了 看到黑黑设置fill: rgba(100,100,0,.35);
估计让我们体会颜色填充的奇妙之处吧。
先不说4个组合的，就是单个元素，劣弧填充也被多填了一层，这个也很奇特{:4_203:}
红影 发表于 2024-10-3 19:32
这个很奇特，从单个单元看，优弧和劣弧竟然转动方向不一样。
哦，其实是一样的，都是从起到终。但在单个单 ...
更多的解释在二楼，已经写好了 红影 发表于 2024-10-3 19:39
还有更奇怪的，当
这个值小于等于50，就变成了两个椭圆，这是咋回事
因为优弧劣弧大小一样。A指令本身画的就是圆弧的一部分。 红影 发表于 2024-10-3 19:38
这些圆弧就这么用别人的劣弧和自己的优弧组装了，给出了整个顺时针选装的整个椭圆的错觉。奇妙
是的吧？这得用火星人的思维方式去思考{:4_189:} 花飞飞 发表于 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楼有解释 代码真的太厉害了，啥都可以做出来{:4_178:}