How to make a SVG diagram not truncate overflowing shapes? - css

Question

I have the following SVG shape which is created programmatically.
<svg style="overflow:visible; margin-left:121px; margin-top:39px; " height="206" width="327">
<path d=" M 244.3,102.7 A 82.3,52 0,0 0,82.3 102.7 L 1.3,102.7 A 163.3,102.7 0,0 1,325.3 102.7 L 325.3,102.7 365.8,102.7 284.8,153.3 203.8,102.7 244.3,102.7 L 244.3,102.7 " x="1.5" y="1.5" style="fill:#92d050; stroke-width:3; stroke:blue; "></path>
</svg>
The fiddle for the above is : http://fiddle.jshell.net/VJL5W/
As one can see the right tip of the arrow is truncated because its path coordinates move outside the dimensions of the SVG.
One thing I can do is to traverse the path of the shape after it has been created and change the height and width of the svg tag according to the highest coordinate values I find, but it will make my code inefficient.
I tried overflow:visible; but it didn't work.
Is there anyway I can make the truncated part visible without changing the SVG's height and width?
Thanx in advance!!
Note: Interestingly overflow:visible is working on firefox but not in chrome based browsers. Also, my SVG is being created server-side from a corresponding VML image in a single parse conversion, so solutions that involve using any client side script can't be used by me.

Answer 1

You can wrap the svg element with a div element, and set styles to the div element, then enlarge the svg size enough to render whole graphic.
<div style="overflow:visible; margin-left:121px; margin-top:39px; height:206px; width:327px;">
<svg height="206px" width="500px">
<path d=" M 244.3,102.7 A 82.3,52 0,0 0,82.3 102.7 L 1.3,102.7 A 163.3,102.7 0,0 1,325.3 102.7 L 325.3,102.7 365.8,102.7 284.8,153.3 203.8,102.7 244.3,102.7 L 244.3,102.7 " x="1.5" y="1.5" style="fill:#92d050; stroke-width:3; stroke:blue; "></path>
</svg>
</div>

Answer 2

document.getElementsByTagName("path")[0].getBBox() will get the bounds of the path (x, y, width, height) you can use those to set the <svg> element width and height.

Answer 3

Use the viewBox attribute of SVG. The viewBox tells the SVG is to take all the image that is being drawn within the viewBox and then apply width and height to it.
Fiddle here
<svg style="overflow:visible; margin-left:121px; margin-top:39px; " height="206" width="327" viewBox="0 0 300 300">
<path d=" M 244.3,102.7 A 82.3,52 0,0 0,82.3 102.7 L 1.3,102.7 A 163.3,102.7 0,0 1,325.3 102.7 L 325.3,102.7 365.8,102.7 284.8,153.3 203.8,102.7 244.3,102.7 L 244.3,102.7 " x="1.5" y="1.5" style="fill:#92d050; stroke-width:3; stroke:blue; "></path>
</svg>

Answer 4

Adding this to Chrome seems make it work but I am not sure if your layout can accommodate wider SVG. Have not tried in IE.
svg {
width:100%;
}