Блог

Главная - Вопросы по программированию - SVG элемент имеет слишком много дополнительного пространства

SVG элемент имеет слишком много дополнительного пространства

#html #css #svg

#HTML #css #svg

Вопрос:

Я использую Bootstrap 4, и на моей веб-странице есть простой svg элемент:

 <svg>
    <polygon points="0,0 20,5 0,10" style="fill: black; stroke: black;" />
    <polygon points="20,0 40,5 20,10" style="fill: black; stroke: black;" />
</svg>

И чтобы показать, сколько дополнительного пространства использует элемент, я создал рамку вокруг элемента:

 <style>
    svg {
        border: 1px solid black;
    }
</style>

Графика очень простая и отображается в основном так, как должна, вот так:

svg скриншот

Но я не понимаю, почему так много дополнительных пробелов справа и внизу. Я перепробовал все, что мог придумать, чтобы просто привести контейнер в соответствие с реальным содержимым: добавление viewBox="0 0 20 40" к svg тегу просто раздувает графику, делая ее огромной, и viewPort ничего не делает. Я перепробовал кучу других «трюков» CSS и помещал графику внутри собственного div элемента, но все это никак не повлияло на внешний вид графики.

Я не помню, чтобы раньше сталкивался с этой проблемой. Добавляет ли Bootstrap дополнительный стиль к svg графике, который я должен переопределить, или это нормально? Ценю любую помощь о том, как это исправить.

Комментарии:

1. вы можете исправить эту проблему, указав ширину и высоту для вашего SVG элемента, я думаю.

2. Вы создаете это с помощью Adoce illustrator?

Ответ №1:

Когда у встроенного заменяемого элемента явно не заданы ни ширина, ни высота, по умолчанию он будет равен 300px * 150px. (Здесь указаны фактические правила)

Это правило касается <iframe> <video> <canvas> и <svg>.

Чтобы избежать этого, задайте ширину или высоту для вашего <svg> (либо с помощью его атрибутов, либо с помощью CSS.

 svg {
  border: 1px solid;
  width: 150px;
  height: 150px;
}  
 <svg viewBox="0 0 40 40">
    <polygon points="0,0 20,5 0,10" style="fill: black; stroke: black;" />
    <polygon points="20,0 40,5 20,10" style="fill: black; stroke: black;" />
</svg>

Ответ №2:

Как упоминает Кайидо, вам нужно объявить атрибут viewBox для svg элемента. Чтобы вычислить размер окна просмотра, я использую, чтобы обернуть все в <g> элемент и использовать метод getBBox() для этого <g> элемента.

В этом случае метод возвращает следующую ограничивающую рамку: {x:0,y:0,height:40,width:10} .

Окно просмотра, которое вам нужно, это: viewBox="0 0 40 10" .

Поскольку ваши полигоны имеют обводку, вам нужно немного дополнительного пространства, поэтому я использовал viewBox="-1 -1 42 12"

Вам не нужно сохранять <g id="test"> перенос.

 svg{border:1px solid}  
 <svg viewBox="-1 -1 42 12">
  <g id="test">
    <polygon points="0,0 20,5 0,10" style="fill: black; stroke: black;" />
    <polygon points="20,0 40,5 20,10" style="fill: black; stroke: black;" />
  </g>
</svg>