如何在SVG中为任意线条程序化实现铁路轨道效果？

核心思路：保留原始路径，分层构建轨道 #

要同时满足保留单线条用于动画/路径寻路和生成贴合任意路径的轨道效果，可采用「原始路径作为基准，分层叠加视觉元素」的方式，避开贝塞尔曲线偏移的复杂计算，也无需依赖SVG不支持的多描边特性。

1. 双轨效果实现（无需路径偏移） #

不用计算贝塞尔曲线的偏移路径，通过分层描边模拟钢轨：

• 保留原始路径（设为透明，仅用于逻辑操作）：<path id="rail-path" d="..." stroke="transparent" />
• 外层宽描边模拟轨道深色底色：<use href="#rail-path" stroke="#2d2d2d" stroke-width="12" />
• 内层窄描边模拟钢轨亮色：<use href="#rail-path" stroke="#7f7f7f" stroke-width="8" />
  所有视觉元素基于原始路径复用，确保完全贴合，且原始路径可单独用于动画或路径寻路逻辑。

2. 枕木效果实现（沿路径均匀分布） #

利用SVG的stroke-dasharray结合描边宽度，实现沿路径的枕木：

<use href="#rail-path" stroke="#4a4a4a" stroke-width="12" stroke-dasharray="12 28" />

其中stroke-dasharray="12 28"表示枕木长度为12，间隔为28，可根据需求调整数值，适配任意曲线或折线路径。

3. 透明镂空效果（替代AI的Knockout Group） #

用SVG的<mask>实现轨道区域内的枕木显示、外部镂空的效果：

1. 创建遮罩层，定义轨道的有效显示范围：

<mask id="rail-mask">
  <use href="#rail-path" stroke="white" stroke-width="12" />
</mask>

2. 将枕木层放入遮罩容器中，确保仅在轨道区域内显示：

<g mask="url(#rail-mask)">
  <use href="#rail-path" stroke="#4a4a4a" stroke-width="12" stroke-dasharray="12 28" />
</g>

4. 完整可运行示例代码 #

<svg width="800" height="600" viewBox="0 0 800 600">
  <!-- 原始路径（透明，用于动画/路径寻路） -->
  <path id="rail-path" d="M100,300 C200,200 300,400 400,300 S600,200 700,300" stroke="transparent" />

  <!-- 遮罩：限定枕木显示区域 -->
  <mask id="rail-mask">
    <use href="#rail-path" stroke="white" stroke-width="12" />
  </mask>

  <!-- 底层背景（模拟地图） -->
  <rect width="800" height="600" fill="#e0f0ff" />
  <circle cx="400" cy="300" r="100" fill="#d0e0dd" />

  <!-- 钢轨层 -->
  <use href="#rail-path" stroke="#2d2d2d" stroke-width="12" />
  <use href="#rail-path" stroke="#7f7f7f" stroke-width="8" />

  <!-- 枕木层（应用遮罩） -->
  <g mask="url(#rail-mask)">
    <use href="#rail-path" stroke="#4a4a4a" stroke-width="12" stroke-dasharray="12 28" />
  </g>
</svg>

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