我需要虚线。 <hr>不会这样做，因为点之间需要更多的空间，除非有办法通过CSS实现这一点？它也没有在我需要的三个Bootstrap列中正确显示。如果有办法解决这个问题，我可以解决它。
我复制了一个我发现的随机SVG行，以便尝试自定义它。
https://jsfiddle.net/eliranmal/hsfxS/
<svg width="357px" height="2px" viewBox="0 0 300 200">
<line x1="40" x2="260" y1="100" y2="100" stroke="#5184AF" stroke-width="20" stroke-linecap="round" stroke-dasharray="1, 30"/>
</svg>什么都没有出现。我已经看到一个建议添加<html xmlns="http://www.w3.org/1999/xhtml">在头部和<svg xmlns="http://www.w3.org/2000/svg"这没有帮助。
viewBox高度为200，而svg高度为height="2px"。 svg元素的width和height与viewBox大小不成比例。
一种解决方案是删除svg元素的高度：
svg{border:1px solid;}<svg width="357" viewBox="0 0 300 200" >
<line x1="40" x2="260" y1="100" y2="100" stroke="red" stroke-width="20" stroke-linecap="round" stroke-dasharray="1, 30"/>
</svg>另一种解决方案是改变viewBox高度的值，使其与width和元素的height成比例。此外，您需要更改线的垂直位置，否则将在viewBox之外绘制齿。在这种情况下，线条高于框，因此您需要添加svg{overflow:visible}
svg{overflow:visible;border:1px solid;}<svg width="357" height="20" viewBox="0 0 300 16.8" >
<line x1="40" x2="260" y1="8.4" y2="8.4" stroke="red" stroke-width="20" stroke-linecap="round" stroke-dasharray="1, 30"/>
</svg>