SVG元素有太多额外空间

Question

I'm using Bootstrap 4, and I have a simple svg element in my Web page:

<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>

And to show how much extra space the element is using, I created a border around the element:

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

The graphic is very simple, and displays mostly as it should, like this:

But I don't understand why there is so much extra whitespace on the right and bottom. I've tried everything I can think of to just make the container fit to the actual content: adding viewBox="0 0 20 40" to the svg tag just blows up the graphic so that it's enormous, and viewPort doesn't do anything. I've tried a bunch of other CSS "tricks" and putting the graphic inside its own div element, all of which had no effect on the appearance of the graphic.

I don't remember experiencing this issue before. Does Bootstrap add extra styling to svg graphics that I have to override, or is this normal? Appreciate any help on how to fix it.

Answer 1

When an inline replaced element has no width nor height explicitely set, it will default to 300px * 150px. (Actual rules are specified here )

Are concerned by this rule, <iframe> <video> <canvas> and <svg> .

To avoid that, set a width or height on your <svg> (eitehr through its attributes, or through 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

As Kaiido mentions you need to declare a viewBox attribute for the svg element. To calculate the size of the viewBox I use to wrap everything in a <g> element and use the method getBBox() for that <g> element.

In this case the method returns the following bounding box: {x:0,y:0,height:40,width:10} .

The viewbox you need is: viewBox="0 0 40 10" .

Since your polygons have a stroke you need some extra space so I used viewBox="-1 -1 42 12"

You don't need to keep the <g id="test"> wrap.

 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>