Question

我需要虚线。 <hr>不会这样做，因为点之间需要有更多的空间，除非有办法通过CSS来实现？另外，它在我需要的三个Bootstrap列中未正确显示。如果有办法可以解决的话，我可以解决。

我复制了一条随机找到的SVG行，以尝试对其进行自定义。

<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"没用。

Answer 1

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>

未显示SVG

1 个答案: