SVG isn't being displayed

Question

I need dotted lines. <hr> won't do as there needs to be more space between dots, unless there's a way to achieve that through CSS? Also it's not being displayed correctly in the three Bootstrap columns I need. I could settle for it if there's a way to remedy that.

I copied a random SVG line I found in order to try customizing it.

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>

Nothing shows up. I've seen a suggestion to add <html xmlns="http://www.w3.org/1999/xhtml"> in the head and <svg xmlns="http://www.w3.org/2000/svg" That didn't help.

by the way here is some idea with pure CSS : https://stackoverflow.com/a/54378688/8620333 / https://stackoverflow.com/a/55364821/8620333 / https://stackoverflow.com/a/48984123/8620333 — Temani Afif, Apr 14 '19 at 11:19
remove `px` from width/height and you can remove the height, keep only the width — Temani Afif, Apr 14 '19 at 11:28

score 0 · Accepted Answer · answered Apr 14 '19 at 12:20

the viewBox height is 200 while the svg height is height="2px". The width and the height of the svg element are not proportional with the viewBox size.

One solution would be deleting the height of your svg element:

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>

Another solution would be changing the value of the viewBox height to make it proportional with the width and the height of the element, Also you need to change the vertical position of the line since otherwise the tine will be drawn outside the viewBox. In this case the line is higher than the box so you need to add 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 isn't being displayed

1 Answers1