4

I need to draw an SVG inside a div and fill it. If the SVG has stroke set, it's drawn outside the div.

I see that svg with width=100% doesn't take into account 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>

How to make the SVG fill the parent taking into account stroke width?

It should be something like this:

enter image description here

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

With the browser dev tool open in Chrome for example, if I hover over the polygon, it shows its bounding box taking into account the stroke. I wonder if that's available only to the web-browser or it can be achieved in code too. Or maybe it's not the right direction.

Another thing I tried is use an <img> and load the SVG into it. Same result.

Don Box
  • 3,166
  • 3
  • 26
  • 55
  • 3
    As I believe I commented earlier. You can't yet. You have to build the SVG Viewbox to take account of any possible stroke. – Paulie_D Oct 26 '16 at 15:39
  • Related - http://stackoverflow.com/questions/7241393/can-you-control-how-an-svgs-stroke-width-is-drawn – Paulie_D Oct 26 '16 at 15:43
  • @Paulie_D But http://vectorpaint.yaks.co.nz/ somehow does it. Make a triangle, set stroke thickness to something like 20 and check out the hover selection rectangle. – Don Box Oct 26 '16 at 15:44
  • @Paulie_D I don't think the questions are related, I'm not looking into controlling the stroke location. – Don Box Oct 26 '16 at 15:45
  • Well they kinda *are*. The viewbox defines the canvas area of the SVG. Your polygon is tightly fitted to the *exact* edges of the SVG so any stroke will be clipped by the viewbox and not be visible. – Paulie_D Oct 26 '16 at 15:47
  • Since I know controlling the `stroke-width` location is not possible, I'm obviously not looking to solve with it. That's why my question is not a duplicate of that one. – Don Box Oct 26 '16 at 15:50
  • Then I don't know what you are asking. The stroke is outside the viewbox...and so isn't visible. I can't say much more than that. – Paulie_D Oct 26 '16 at 15:53
  • I figured out how http://vectorpaint.yaks.co.nz/ is doing it. It's just setting the `outline` on the hover selector. Not a solution for me however :( – Don Box Oct 26 '16 at 15:55
  • @Paulie_D I need to draw SVG with stroke inside `div` with the SVG filling the `div`. – Don Box Oct 26 '16 at 15:57

1 Answers1

1

looks like you just need to change your polygon points in this example!

Or im missing something here?!

.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>
Amin Setayeshfar
  • 468
  • 6
  • 23