如何让Input按钮显示在SVG贝塞尔曲线上方？

问题根源 #

1. JavaScript语法错误：Setup函数中给按钮设置样式时，错误使用赋值运算符=替代方法调用，导致样式设置失效还可能破坏元素属性方法：

   // 错误写法
   Button_Identification.setAttribute = ("style", "top: 100px; height: 200px;");
   

2. 无效HTML属性：直接在按钮、SVG标签中写position = "absolute"这类属性不符合标准，样式属性应通过style属性或CSS控制。
3. 堆叠顺序冲突：SVG默认堆叠层级可能高于按钮，导致按钮被遮挡或布局错位。

具体修复步骤 #

1. 修正JavaScript错误

将Setup函数中的错误代码改为正确的方法调用，或直接删除该行（CSS已定义按钮样式，无需重复设置）：

// 正确写法（如需保留JS设置）
Button_Identification.setAttribute("style", "top: 100px; height: 200px; position: absolute; z-index: 10;");
// 推荐：直接删除该行，用CSS统一控制更稳妥

2. 清理HTML无效属性

移除按钮和SVG标签中的非法样式属性，修改后代码：

<body onload="Setup()">
     <input type="button" id="Bezier_Curve_Button" onclick="Setup2()" value="Click Me!"/>
     <svg xmlns="http://www.w3.org/2000/svg" id="My_SVG" height="500px" width="600px">
     <path id="Bezier_Curve_1"/>
     <path id="Bezier_Curve_2"/>
     </svg>
</body>

3. CSS控制布局与堆叠顺序

更新CSS，给按钮设置更高的z-index确保其在SVG上方，同时规范SVG布局：

#Bezier_Curve_Button {
    position: absolute;
    top: 100px;
    left: 50px;
    height: 100px;
    width: 150px;
    z-index: 10; /* 强制按钮堆叠在SVG之上 */
}

#My_SVG {
    position: absolute;
    top: 200px;
    /* 可按需添加left属性调整位置，避免与按钮重叠 */
}

4. 可选：优化SVG路径布局

检查Setup函数中路径坐标，确保SVG内部图形不超出容器，或调整SVG的top/left属性避免布局挤压。

修复完成后，按钮会固定在设置的位置，不会被SVG挤到底部，且始终显示在贝塞尔曲线上方。

内容的提问来源于stack exchange，提问作者Speedlearner