svg vue 画曲线

1.path如何实现曲线
path元素有一个属性d，属性d中包含很多属性，如下图所示：

image.png

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"
                            viewBox="0,0,700,500">
                            <circle cx="512" cy="220" r="9" fill="#387197"></circle>


                            <path id="myPath" d="M 512 220 q -20 -62 10 -85"
                                style="fill: none; stroke: transparent; stroke-width: 1;" />
                            <circle cx="5" cy="5" r="5" fill="#387197">
                                <animateMotion dur="5s" repeatCount="indefinite">
                                    <mpath xlink:href="#myPath" />
                                </animateMotion>
                            </circle>

                            <path d="M 512 220 q -10 -62 20 -85" id="path1-1"
                                style="fill: none; stroke: #387197; stroke-width: 1;"></path>


                        </svg>