如何用JavaScript绘制指定厚度的曲线外侧及内侧同厚度线条？

要在原SVG线条内部生成同厚度的新线条，核心是将原路径向其内侧偏移特定距离，再用偏移后的路径作为新线条的中心线。以下是具体思路和示例：

核心逻辑 #

原线条的stroke-width为4px，意味着原路径是这条线条的中心线，线条向中心线两侧各延伸2px。要生成内部同厚度的线条，新线条的中心线需要向原路径内侧偏移2px（原线条半宽）——这样新线条的外侧刚好与原线条的内侧对齐，且新线条同样向自身中心线两侧延伸2px，完全位于原线条内部。

手动计算示例（针对你的心形路径） #

原心形路径的d属性为：

M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z

我们需要对每个路径段单独偏移2px：

1. 圆弧段：原圆弧半径为20px，向内偏移2px后半径变为18px，同时调整圆弧的起点/终点（保持圆心位置不变，沿径向向内收缩）：
   • 第一个圆弧：M 10,30 A 20,20 0,0,1 50,30 → 改为 M 12,30 A 18,18 0,0,1 48,30
   • 第二个圆弧：A 20,20 0,0,1 90,30 → 改为 A 18,18 0,0,1 88,30
2. 二次贝塞尔曲线段：沿曲线内侧法线方向偏移控制点和终点：
   • 右侧曲线：Q 90,60 50,90 → 改为 Q 88,60 50,88
   • 左侧曲线：Q 10,60 10,30 → 改为 Q 12,60 12,30

组合后的新路径代码如下（红色线条为内部新线条）：

<svg viewBox="0 0 100 100">
    <!-- 原线条 -->
    <path stroke-width="4" stroke="black" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" fill="none" />
    <!-- 内部同厚度新线条 -->
    <path stroke-width="4" stroke="red" d="M 12,30 A 18,18 0,0,1 48,30 A 18,18 0,0,1 88,30 Q 88,60 50,88 Q 12,60 12,30 z" fill="none" />
</svg>

复杂路径的处理方式 #

对于不规则或复杂路径，手动计算偏移量效率极低，可借助以下方法：

• 使用路径处理库（如paper.js、svg-path-properties），通过代码自动计算偏移后的路径数据；
• 使用SVG编辑工具（如Inkscape、Figma）的“路径偏移”功能，直接生成内侧偏移路径，再导出其d属性。

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