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

【问题标题】：Path starting and ending at same element (looping back)在同一元素处开始和结束的路径（循环返回）
【发布时间】：2020-08-29 14:47:10
【问题描述】：

我是 svg 库（HTML5 svg 标记和相关）的新手，正在努力学习。我正在使用 svg 在 VueJS 中开发一个小图表编辑器。我知道如何创建一个矩形，甚至是从一个矩形/圆形/等到另一个的路径，但我不清楚如何创建一个在同一个矩形开始和结束的路径（即循环） - @987654321 @

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

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

【问题讨论】：

标签： svg diagram

【解决方案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>

【讨论】：