How to make an SVG diagram not truncate overflowing shapes?

Question

I have the following form of SVG, 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>

Script for above: http://fiddle.jshell.net/VJL5W/

As you can see, the right tip of the arrow is truncated because its path coordinates move outside the SVG dimensions.

One thing that I can do - go through paththe form after you create and edit tags heightand widthtag svgin accordance with the highest values of the coordinates, which I find, but it will make my code ineffective.

I tried overflow:visible;, but it didn’t work.

In any case, can I make the cropped part visible without changing the height and width of the SVG?

Thanx in advance!

. , overflow:visible firefox, . , SVG VML , , script, .

Answer 1

svg div div, svg, .

<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() (x, y, width, height), <svg>.

Answer 3

Use viewBox attribute for SVG. The ViewBox reports that the SVG should take the entire image that is drawn inside the viewBox, and then apply the width and height to it.

Spell 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 to make it work, but I'm not sure if your layout can accommodate a wider SVG. Not tried in IE.

svg {
    width:100%;
}