在 SVG 中弯曲贝塞尔曲线：用两个滑块控制控制点的 JavaScript 入门指南

关于本文
本文是通过利用生成式 AI 的自动化生成流程创建的。
确认了 SVG 的path和三次贝塞尔曲线的官方规范，并制作了一个虚拟教材，可以通过两个滑块改变线条形状。这是 ChatGPT 对 P1 至 P5 的自我审查，并非独立的 AI 审查。

验证状态：🧪 JavaScript 语法已确认 / 隔离 Chromium 144 操作 12 项全部通过 / 公开 Pages 和 WordPress 实际显示尚未确认
2026年10月31日，将 MDN 的规范与保存在 GitHub 中的代码进行了核对。在隔离的 Linux Chromium 144 中加载了相同的 HTML/JavaScript，并执行了 12 个项目，包括滑块操作、SVG 更新、状态文本、直线化、重置、绘图和移动端宽度等。GitHub Pages 的可访问性、实际智能手机、蓝色框内的 WordPress 实际显示以及打印外观尚未确认。

SVG 的曲线即使固定了起点和终点，也可以改变形状。这次，我们将通过滑块上下移动两个“控制点”，来观察蓝色的线条是如何弯曲的。在背诵代码之前，先试着让线条动起来吧。

首先尝试：自己弯曲曲线

🔷 实时演示
打开SVG贝塞尔曲线操作演示（公开访问状态未确认。在隔离的Chromium中对相同的HTML/JS进行操作验证）
GitHub示例与README（已保存）

最初的3个操作
1. 将“控制点1的高度”从70调整至160。
2. 对比蓝色线条与屏幕下方的SVG指令。
3. 点击“设为直线”，确认线条与数值的变化。

初始设计会显示一条从起点到终点微微起伏的线条。移动滑块时，紫色控制点、虚线以及蓝色曲线会随之改变。下表是在隔离的Chromium中确认的结果。并非公开Pages或实际智能手机上的结果。

操作后请看这里。 不仅是图形，还会检查下方显示的M 60 160 C 200 70 400 250 540 160这样的指令。如果文字的数值发生变化，就可以读取到传递给SVG的坐标已经改变。即使难以辨别颜色或形状，也可以通过屏幕阅读功能来确认状态说明。但是，尚未在真实设备上结合辅助技术进行测试。

为什么线会在两点处弯曲

SVG的<path>不仅可以绘制直线，还可以通过一个元素绘制曲线和圆弧。d属性中包含“从哪里开始、绘制什么样的线”的指令以及坐标。本次的M移动到起点，C是指定两个控制点和一个终点的三次贝塞尔曲线。

M 60 160 C 200 70 400 250 540 160
  始点      制御点1 制御点2   終点

起点为(60,160)，终点为(540,160)。两者的垂直高度都固定在160。另一方面，控制点1的Y是70，控制点2的Y是250。两个控制点是决定线条向哪个方向被拉扯的线索。控制点并不一定非得落在曲线本身上面。 如果把这一点弄混了，就会误以为紫色点和蓝色线不重合是发生了故障。

flowchart LR
    A["スライダーを動かす"] --> B["Y座標を読む"]
    B --> C["SVGのd属性を更新"]
    C --> D["曲線を再描画"]
    C --> E["座標を文字で表示"]

该图简化了教材的事件处理，并非对浏览器内部渲染处理的准确图示。

代码的核心是“将坐标转换为字符串”

从完成版的JavaScript中，仅提取与线条更新相关联的部分。

const y1 = Number(topSlider.value);
const y2 = Number(bottomSlider.value);
const d = `M 60 160 C 200 ${y1} 400 ${y2} 540 160`;
route.setAttribute("d", d);

Number()读取滑块的值作为数值，d并重新构造字符串。setAttribute("d", d)会更新现有SVG元素的d属性。此设计不是从用户的自由输入中接收字符串，而是从带有HTML的min・max・step滑块中获取。由于坐标范围是确定的，因此无需在输入中包含个人信息或任意HTML。MDN警告说，根据使用setAttribute()的属性类型，传递不可信的值可能会导致脚本执行等问题。在本教程中，更新目标仅限于SVG的d等属性，并且只使用从带范围的滑块转换而来的数值。当将其改用于接收自由输入的实际业务应用程序时，请对属性名和输入值进行分别验证。

这四行并非完整代码。获取滑块与SVG元素、注册事件、更新紫色点与虚线、显示文字以及按钮操作等功能，都已分离到了Daily Code的JavaScript主体中。这样可以避免在文章中粘贴长篇的HTML或CSS，以便让读者首先理解“修改什么会发生什么”。

只修改一处，然后与预期进行对比

在“设为直线”中，我们将两个控制点的高度都设为160。由于起点和终点也是160，因此所有点都排列在同一条水平线上。在这种情况下，三次贝塞尔曲线在数学上就变成了一条直线。这并非单纯将C指令重写为L指令。

接下来，请仅将控制点1从160更改为100。控制点2保持160不变。预期的差异是靠左侧的部分会向上凸起。移动控制点时，曲线的整体形状会连续变化。由于同时改变两个滑块会让人难以解释原因，因此最初只变动一个条件。

还要注意，这里的坐标轴Y轴是越往下数值越大。在平时的数学图表中，我们通常认为向上的方向为正，但在本次的SVG显示区域中，越是上方的点Y值越小。向上移动时数值减小是正常现象。

在自己的电脑上运行

如果无法打开演示，请使用固定提交版本中的HTML与JavaScript保存到同一个文件夹中。index.html设计为在浏览器中打开，无需额外的软件包。如果从本地文件加载时出现问题，可以根据需要使用本地 HTTP 服务器。

python3 -m http.server 8000 --bind 127.0.0.1

在同一台电脑上打开http://127.0.0.1:8000/。在终端中停止是Ctrl+C。如果在 Windows 上没有python3，如果安装了 Python Launcher，可以将其替换为py -3。此本地启动步骤在本次实际设备中也未执行。在组织电脑上，请确认可用的开发工具和策略。

当无法正常运行的时候

本次将SVG的显示区域viewBox="0 0 600 320"固定为，并采用通过CSS根据横向宽度进行缩小的设计。即使浏览器画面的宽度发生变化，内部坐标也使用相同的值。目前尚未确认在实际的智能手机或A4/PDF打印时是否不会走样。

⚠️ 安全与限制
仅显示虚拟坐标，而非实际地图或配送路线。不使用外部CDN、位置信息、麦克风、摄像头和身份验证。不在WordPress正文中嵌入任意JavaScript，操作画面将分离到Daily Code的独立页面中。

如果在工作或学习中使用

该机制可应用于连接工序的曲线、说明图的箭头、公式的可视化以及画面内的路径表现。例如，当业务流程中连接两个工序的线与其他元素重叠时，可以通过调整控制点的位置使其更易于看清。但是，曲线看起来美观与业务流程的内容正确是两码事。

地图应用程序中使用的实际道路路线或交通路线，无法仅通过自由绘制贝塞尔曲线来重现。本次的教材是为了学习曲线控制而准备的。此外，如果仅用线的形状或颜色来表现重要信息，有时在打印、色觉差异或朗读环境中可能无法传达。请以坐标和说明文字并记的设计为基本原则。

由于SVG将图形作为元素保存，因此它与使用Canvas绘制大量粒子的教材职责不同。像本次这样直接更新少量线和控制点的情况下，使用SVG可以更容易地追踪坐标与图形之间的对应关系。在频繁更新大量元素时的性能，必须通过实际的终端设备和数据量来进行比较。

官方文档

• MDN：SVG的d属性 — M与C的含义，path的指定方法。

• MDN：SVG路径入门 — 三次贝塞尔曲线与控制点的概念。

• MDN：setAttribute() — 如何在 JavaScript 中更新属性。

官方资料核实日期：2026年11月1日（重新核对 MDN 的d属性、路径、setAttribute()等页面）。确认 2026 年 10 月 31 日从 GitHub 获取的 HTML/JavaScript 的 Git blob SHA 一致，在隔离的 Chromium 144（Linux、无头模式）中，桌面/移动端宽度的 12 项操作全部通过。2026 年 11 月 1 日在 V8 的模拟 DOM 中重新运行了同一 GitHub 上的app.js，初始显示、滑块、控制点、直线化、状态文本、重置、显示字符串等 8 项全部通过。由于管理限制拒绝了对 file:// 的直接跳转，因此使用 set_content 加载相同的 HTML，并通过 add_script_tag 运行相同的 JavaScript。GitHub Pages 的公网访问、真实设备、WordPress 蓝色边框的实际显示以及打印尚未确认。

GitHub 示例

• Chromium 操作 12 项的复现测试（Playwright，可选）

• Daily-Code-Samples：SVG 贝塞尔曲线操作教材

• JavaScript 完成版

• 在线演示（访问与操作未确认）

正文是用于理解操作、观察和原理的教材，GitHub 是用于复用 HTML、JavaScript、README 以及可选浏览器测试的正本。头图尚未制作和注册，正文中也没有设置不存在的图片或媒体 ID。