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

问题描述

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

我不太在乎起点和终点与矩形的相交之处，尽管我希望它们彼此相对靠近或至少在矩形的同一边缘上。

感谢任何朝着正确方向前进的人。

解决方法

只需创建一个<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>

diagram svg