Javascript 将上面的输入定位到svg曲线上

我想将输入表单元素放在svg曲线的中心上方，如下所示

曲线按以下形式指定

<svg width="600" height="80" style="border-style: dashed;" xmlns="http://www.w3.org/2000/svg" id="" style="display: none;">
   <defs>
     <marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
       <path d="M0,0 L0,6 L9,3 z" fill="#f00" />
     </marker>
   </defs>
   <path d="M10 40 Q 95 0 200 40" stroke="black" fill="transparent" marker-end="url(#arrow)"/>
</svg>

有可能吗？我对这么多代码不感兴趣，对如何实现它不感兴趣

---

您可以使用

getBoundingClientRect

找到曲线的边界框，然后从那里开始。我在你的曲线上添加了一个

id

，这样我就可以很容易地找到它

函数设置输入位置（曲线，输入）{
var bb=curve.getBoundingClientRect（）；
//由于DOMRect是相对于视口的，
//我们需要添加滚动到它的金额，如果我们想绝对
//把它放在页面上。
//我还添加了一半的曲线宽度，使其水平居中。
//然后我使用CSS将输入与点对齐，
//但显然你也可以在这里这样做。
input.style.position='绝对'；
input.style.top=bb.top+document.body.scrollTop+'px'；
input.style.left=bb.left+document.body.scrollLeft+bb.width/2+'px'；
}
var curve=document.querySelector（“#myPath”）；
var input=document.querySelector（“#myInput”）；
window.addEventListener（'resize'，（）=>{
设置输入位置（曲线、输入）；
});
设置输入位置（曲线、输入）
输入{
转换：转换（-50%，-100%）；
}

如果这是一个简单的二次曲线，那么它的中心正好在中间。只需将输入和SVG放在一个容器中并水平居中，例如使用flexbox。输入必须绑定到曲线。假设可能存在多条这样的svg曲线