Svg 线半实线，半虚线答案

【问题标题】：Svg line half solid, half dashedSvg 线半实线，半虚线
【发布时间】：2021-05-25 21:23:49
【问题描述】：

我有一个内联 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>

【问题讨论】：

stroke-dasharray: 135 ?
当您在stroke-dasharray 属性中使用% 时，它将take a value relative to the current viewport: 与行/路径的长度无关。如果您希望线条填充 50%，则需要在 JS 中计算路径长度，然后将属性值设置为该值的一半。
没有多少人熟悉 pathLength 属性，但这是使用它的完美用例（下面是 Danny 的回答）——这避免了必须使用 JS 或使用两行代码

标签： css svg

【解决方案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>

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

【讨论】：

感谢您的正确答案，但我没有奢侈添加另一行。非常感谢。
希望您能更好地了解 svg 和 stroke-dasharray。玩得开心！

【解决方案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>

【讨论】：

单元逻辑在我的情况下有很多用处，所以我会接受这个。非常感谢。
单元逻辑总是比硬编码好...除非你不知道pathLengthdeveloper.mozilla.org/en-US/docs/Web/SVG/Attribute/pathLength
@Danny'365CSI'Engelman 对于六个破折号，您使用六对 (2,5) stroke-dasharray 属性。对于一千个破折号，你会用一千对属性 (2,5) 编写代码吗？