SVG не отображается - PullRequest
Новая
       2

SVG не отображается

2 голосов
/ 14 апреля 2019

Мне нужны пунктирные линии. <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" Это не помогло.

1 Ответ

0 голосов
/ 14 апреля 2019

высота viewBox равна 200, а высота svg равна height="2px".width и height элемента svg не пропорциональны размеру 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...