Problem with SVG stroke inside div

Question

I need to draw an SVG inside divand fill it out. If the SVG has it stroke, it is drawn out div.

I see that svgc width=100%does not account for the stroke width.

.shape {
  border: 1px solid blue;
  width: 200px;
  height: 200px;
}
svg {
  overflow: hidden;  // IE11 has 'visible' as default
}

<div class="shape">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" preserveAspectRatio="none" stroke="red" stroke-width="20" viewBox="0,0,100,50">
    <polygon points="0,50 100,50 50,0" />
  </svg>
</div>

Run codeHide result

How to make SVG fill the parent element based on the stroke width?

It should be something like this:

This should work for any SVG, the triangle is just an example.

If the browser tool is open in the Chrome browser, then if I am above polygon, it shows its bounding box taking into account the stroke. I wonder if this is available only for a web browser, or whether this can be achieved in code as well. Or maybe this is not the right direction.

, , - <img> SVG. .

Answer 1

, !

- ?!

.shape {
  border: 1px solid blue;
  width: 200px;
  height: 200px;
}
svg {
  overflow: hidden;  // IE11 has 'visible' as default
}

<div class="shape">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" preserveAspectRatio="none" stroke="red" stroke-width="15" viewBox="0,0,100,50">
    <polygon points="10,50 90,50 50,10" />
  </svg>
</div>

Hide result