4

I have <svg> inside of a <div>, but the stroke is giving me issues, it's being clipped by the div's bounding box I think, not sure.

On Chrome and FireFox, the stroke is being clipped.

Surprisingly, on IE11 it's not clipped, but that's still not correct, it should instead be drawn inside the svg. Because if I put two div elements near each other, I don't want to see stroke of one of the svg being drawn on the other. BUT, if there's no other way, this would still be an acceptable solution to me.

Ideally what I need is for the svg to draw its stroke inside. But even how IE 11 is doing would be an acceptable solution for me for now.

.container
{
  width: 300px;
  height: 300px;
}
<div class="container">
  <svg version="1.1" 
       baseProfile="full"
       xmlns="http://www.w3.org/2000/svg"
       width="100%" 
       height="100%"
       fill="yellow"
       stroke-width="10"
       stroke="green">
    <circle cx="50%" cy="50%" r="50%" />
  </svg>
</div>

I need a solution which works for any svg, the circle is just an example

Don Box
  • 3,166
  • 3
  • 26
  • 55
  • At present that's not possible. Strokes are in fact drawn half on one side of the path and the other half on the inside. There is no `stroke-position` property. You'll just have to adjust the viewbox of your SVG. – Paulie_D Oct 23 '16 at 09:05
  • 1
    Related - http://stackoverflow.com/questions/7241393/can-you-control-how-an-svgs-stroke-width-is-drawn? – Harry Oct 23 '16 at 09:08
  • @Harry Is it really related? I'm not looking to control the stroke really, I was thinking there could be something related to the `div` or `svg`, like margins or padding or something – Don Box Oct 23 '16 at 09:43
  • If the question is really a duplicate maybe I delete or close this question? – Don Box Oct 23 '16 at 09:44
  • @DonBox: I think it is (but not sure which is why I just left a comment and didn't vtc). The "control" they mean is about where the stroke is drawn. By default, I think it is drawn half inside and half outside in SVG. – Harry Oct 23 '16 at 09:44
  • I find it hard to believe there's no good workaround – Don Box Oct 24 '16 at 08:00
  • Is there a way to make it draw without clipping? Even if it's drawing outside of the `
    `. Just like IE is doing
     – Don Box Oct 24 '16 at 08:02
  • @Harry I updated my question. Even how IE11 is drawing it would be an acceptable solution, so my question is definitely not a duplicate of that question. Could you please remove the "duplicate" status? – Don Box Oct 24 '16 at 08:05
  • @DonBox: Did you check the two bullet points in Phrogz' answer in that thread? That would be the solution/workaround. I am not convinced about it being a dupe or not, so I will let the community decide on it. Since you've edited the question, it will go to the review queue anyway. – Harry Oct 24 '16 at 08:12
  • For some reason it's not possible to send in another answer but I think you are simply looking for `overflow: visible;` style on the SVG itself. You'll see the stroke not clipped. I don't think you meant what photoshop has for borders as inside / outside / center, that would be just a workaround, drawing the stroke inside the circle. Most user agents are showing svg with hidden overflow. – Firsh - justifiedgrid.com Dec 23 '17 at 16:40

1 Answers1

3

The stroke doesn't count with the total radius. Reduce the radius:

.container
{
  width: 300px;
  height: 300px;
}
<div class="container">
  <svg version="1.1" 
       baseProfile="full"
       xmlns="http://www.w3.org/2000/svg"
       width="100%" 
       height="100%"
       fill="yellow"
       stroke-width="10"
       stroke="green">
    <circle cx="50%" cy="50%" r="45%" />
  </svg>
</div>
Uriel
  • 15,579
  • 6
  • 25
  • 46
  • I need to make it work for any svg. This is just an example. Sorry if I wasn't clear, I will update the question – Don Box Oct 23 '16 at 09:40