How to fix SVG top and left stroke truncation?

Question

I have created an ellipse in SVG with a stroke-width and stroke but the top and left sides of the stroke are truncated. They appear to be overflowing outside of the containing svg tag. I tried using overflow:visible; property on the SVG but it still doesn't work.

Following is my HTML:

<div id="div1">
    <svg id="svg1">
        <ellipse id="oval1" cx="164.041666625656" cy="96.1319444204114" rx="164.041666625656" ry="96.1319444204114"></ellipse>
    </svg>
</div>

And this is its CSS:

#div1 {
    padding:10px;
    margin:10px;
}
#svg1 {
    overflow:visible;
    margin-left:86.4305555339479;
    margin-top:-4.409722221119791;
}

#oval1 {
    fill:hsl(50.7692307692305,27.6595744680847%,68.0882352941177%);
    stroke-width:5.291666665343749;
    stroke:hsl(79.5918367346938,41.8803418803418%,40.5882352941176%);
}

You can see the running code here as well.

I have had a similar problem with rectangles in the past and they got fixed after using overflow:visible; for the containing svg. But it doesn't seems to be working for ellipses now.

Can anyone help me fix the issue?

Thnx in advance!

Answer 1

UPDATE: Looks like there are active bug for this behaviour in at least Chrome (https://code.google.com/p/chromium/issues/detail?id=231577) and has been for Firefox as well (https://bugzilla.mozilla.org/show_bug.cgi?id=378923). So depending on version you might be out of luck. As of writing this is not fixed in Chrome (32.0.1700.6 beta) and there is a fiddle you can use to test with here: http://jsfiddle.net/HRsvX/36/ all three triangles should be fully visible if the browser implements the current SVG 1.1 spec. Fiddle reproduced below.

The circle inner area is bordering the SVG element. Before HTML5t the SVG element itself is like an image or flash movie, it can't overflow into the html document, it has it's own canvas so to speak. When you add stroke (that by default is outside the area you defined) the stroke will end up outside the SVG canvas. You'll have to account for that in the centering of the circle:

The center has to be the radius+stroke width so your center x for example would have to be 164.041666625656 + 5.291666665343749 minimum to fully fit inside the SVG.

If you specify the HTML5 doctype and use an inline SVG as in your example it should show the overflowing content since the default value for overflow is visible and HTML5 allows for overflow on inline SVG elements.

So either check your doctype or reposition the center to account for the stroke width.

More on the overflow of SVG elements can be found in Mozilla developer documents and a nice piece on this MSDN blog that explains the default overflow.

HTML

<div><svg height="100" width="100" viewbox="00 0 100 100">
  <path d="M210 10 L90 10 L90 90 " fill="red"/>
</svg></div>

<div><svg id="clip1" height="100" width="100" viewbox="00 0 100 100">
  <path d="M210 10 L90 10 L90 90 " fill="red"/>
</svg></div>

CSS

div {
    height:100px; width:100px;
    margin:1em auto;
    border: solid 1px black;
}

svg { overflow:visible }

#clip1 {clip: rect(-10px,-10px,-10px,-10px)} //nope
#clip2 {clip: auto} //nope

Answer 2

Add a viewBox that describes the content of the SVG. The browser will then ensure that the entire ellipse and its stroke are visible. If you want it renderered at 1:1, you will also need to add an equivalent width and height.

<svg id="svg1" width="335" height="199" viewBox="-3 -3 335 199">
    <ellipse id="oval1" cx="164.041666625656" cy="96.1319444204114" rx="164.041666625656" ry="96.1319444204114" />
</svg>

Demo here