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

Question

Я использую 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>

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

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

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

Answer 1

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

Обеспокоены этим правилом

Чтобы избежать этого, установите ширину или высоту на (через атрибуты или через 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>

Answer 2

Как упоминает Кайидо, вам нужно объявить атрибут viewBox для элемента svg.Чтобы вычислить размер viewBox, я использую, чтобы обернуть все в элемент <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>