Svg 线半实线半虚线

Question

我有一个内联 SVG 对象，其中有一些行。我正在尝试将线的一半绘制为实线，另一半绘制为虚线。

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

Answer 1

最简单的方法是使用 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>

该行程dasharray属性将重演下去，所以如果你输入“模式”不会持续到该行的结束，它会再次使用的第一个值和重复的模式。
您可以看到在您的示例中，长划线（50% 的值）重复了 3 次，中间有 3 个小划线（1% 的值）（2 个空的和一个实心的）。

Answer 2

• 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,5,2,5,2,5" 
          stroke="black" stroke-width="4"
          x1="10" x2="280" y1="10" y2="10" />
</svg>