Svg 线一半实线，一半虚线

Answer 1

• 在

  pathLength="100"

  上放置

  line

  ，以便总长度计算为 100 单位
  https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pathLength

• 将

  stroke-dasharray

  单位设置为您想要的图案：

  

<svg>
    <line pathLength="100" stroke-dasharray="50,2,5,2,5,2,5,2,21" 
          stroke="black" stroke-width="8"
          x1="10" x2="280" y1="10" y2="10" />
</svg>

Answer 2

最简单的是使用 2 个线对象。一个用于制作实线，另一个用于制作虚线。这是一个例子：

<svg height="30" width="300">
  <g fill="none" stroke="black" stroke-width="4">
    <line x1="10" x2="150" y1="10" y2="10" />
    <line stroke-dasharray="5,5" x1="150" x2="280" y1="10" y2="10" />    
  </g>
</svg>

中风破折号属性将无限重复，因此如果您输入的“模式”没有持续到行尾，它将再次使用第一个值并重复该模式。
您可以看到，在您的示例中，长破折号（50% 值）重复了 3 次，中间有 3 个小破折号（1% 值）（2 个空破折号和 1 个实心破折号）。