如何在SVG中绘制可脚本填充的多条垂直线？

根据你的需求，这里提供两种可行的方案，适配不同的场景：

方案一：用SVG Pattern实现可脚本控制的虚线填充区域 #

如果你需要的是矩形区域内填充横向虚线（而非边框虚线），且要方便后续脚本修改，推荐使用<pattern>定义重复的虚线单元，再用这个图案填充矩形。这种方式不需要绘制多条独立线段，仅通过操作图案或矩形的填充属性就能实现效果变化。

示例代码：

<svg id="edilRW8EQ5h1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 12.5" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
  <!-- 定义重复的虚线图案 -->
  <defs>
    <pattern id="dashFillPattern" patternUnits="userSpaceOnUse" width="20" height="2.134695" x="0" y="6.25">
      <!-- 单个虚线单元：10单位长的横线，间隔10单位 -->
      <line x1="0" y1="1.067" x2="10" y2="1.067" stroke="#3f5787" stroke-width="0.5"/>
    </pattern>
  </defs>
  <!-- 用图案填充目标矩形 -->
  <rect x="0" y="6.25" width="54" height="2.134695" fill="url(#dashFillPattern)" />
</svg>

后续脚本操作示例：

// 修改所有虚线的颜色
document.querySelector('#dashFillPattern line').setAttribute('stroke', '#ff0000');
// 或者切换为实心填充
document.querySelector('rect').setAttribute('fill', '#3f5787');

方案二：调整StrokeDasharray参数实现边框虚线 #

如果你需要的是矩形边框的虚线效果，问题出在你设置的pathLength属性——它会让strokeDasharray的数值按比例缩放，导致虚线长度不符合预期。去掉pathLength，直接用实际坐标单位定义虚线，同时可以调整路径只保留上下边框（如果不需要左右边框）：

示例代码：

<svg id="edilRW8EQ5h1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 12.5" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
  <!-- 仅绘制上下两条虚线边框，隐藏填充 -->
  <path d="M0,6.25h54 M0,8.384695h54" stroke="#3f5787" stroke-width="0.5" strokeDasharray="10,10" fill="none"/>
</svg>

如果需要完整的矩形虚线边框，只需调整路径为完整矩形，去掉fill="white"（避免覆盖边框）：

<svg id="edilRW8EQ5h1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 12.5" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
  <path d="M0,6.25h54v2.134695h-54z" stroke="#3f5787" stroke-width="0.5" strokeDasharray="10,10" fill="none"/>
</svg>

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