Question

我想在其中创建一个带有多个“孔”的圆形路径，最好不使用蒙版等。

目前，我得到的是this：

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 400 400">
    <path d="M 100 100 A 90 90 0 1 0 200 100 M 110 90 A 90 90 0 0 1 190 90" stroke="#424242" stroke-width="5" fill="transparent" />
</svg>

如您所见，这取决于手动移动新弧的开始，这会导致弧关闭。

我宁愿不需要做很多数学运算来获得移动恰好的位置，那么我可以使用某种“弧形移动”吗？

如果没有，那么这项工作的数学怎么样（我在几何学方面非常生疏）

Answer 1

实现目标的最简单方法可能就是使用破折号数组。

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 400 400">
    <path d="M 100 100 A 90 90 0 1 0 200 100 M 110 90 A 90 90 0 0 1 190 90" stroke="#424242" stroke-width="5" fill="transparent" />
    <path d="M 60 175 A 90 90 0 0 1 240 175 A 90 90 0 0 1 60 175" stroke="red" stroke-width="5" fill="transparent" stroke-dasharray="88 14 78 14 372"/></svg>

＆＃13;

SVG中两次中断的圆形路径

1 个答案: