在同一元素开始和结束的路径（循环返回）

Question

我是 svg 库（HTML5 svg 标签及相关）的新手，正在尝试学习。我正在使用 svg 在 VueJS 中开发一个小图表编辑器。我知道如何创建一个矩形，甚至是从一个 rectangle/circle/etc 到另一个的路径，但我不清楚如何创建一条以同一矩形开始和结束的路径（即循环）- something like this

我不太在意起点和终点与矩形相交的位置，但我更希望它们彼此相对靠近或者至少在矩形的同一边上。

感谢您在正确方向上的任何推动。

Answer 1

只需创建一个 <path> 由贝塞尔曲线组成，其控制点形成一个矩形。

<svg viewBox="0 0 100 100">

   <rect x="50" y="10" width="50" height="40" fill="#4472c4"/>

   <path d="M 50,20 C 10,20 10,40, 50,40" fill="none" stroke="red"/>

   <!-- Show grey lines to indicate the bezier control points -->
   <line x1="50" y1="20" x2="10" y2="20" fill="none" stroke="lightgrey" stroke-width="0.5"/>
   <line x1="50" y1="40" x2="10" y2="40" fill="none" stroke="lightgrey" stroke-width="0.5"/>
</svg>

在同一元素开始和结束的路径（循环返回）

Path starting and ending at same element (looping back)

svg

diagram