What is the default width/margin/padding of SVG <g> and <text> elements?

Question

I have the following SVG file I am working on. http://jsfiddle.net/slayerofgiants/9y3qc/8/

If you notice from the fiddle file, the horizontal scrollbar extends to about twice the width of the SVG drawing. There is nothing but white space beyond the edge of the SVG. If I remove the <g> and <text> elements, then horizontal scrollbar goes away and is the size of the width of the screen.

You can see this on this 2nd jsfiddle http://jsfiddle.net/slayerofgiants/m5zPv/

The code below is the SVG with no g elements containing the paired text elements.

<svg version="1.1" width="90%" id="ex1-3rds-quarter-s" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
 y="0px"  viewBox="0 0 323.333 55.333" enable-background="new 0 0 323.333 55.333"
 xml:space="preserve" preserveAspectRatio="xMinYMid meet">
     <font horiz-adv-x="1000">
<g id="fullTAB"  transform="scale(1.1,1)"  >
<g id="tablines" display="block">
        <line fill="none" id="lowE" stroke="#000000" stroke-width="0.1" stroke-linecap="round" stroke-linejoin="round" x1="6" y1="45" x2="262" y2="45"/>
        <line fill="none" id="Astring" stroke="#000000" stroke-width="0.1" stroke-linecap="round" stroke-linejoin="round" x1="6" y1="38.5" x2="262" y2="38.5"/>
        <line fill="none" id="Dstring" stroke="#000000" stroke-width="0.1" stroke-linecap="round" stroke-linejoin="round" x1="6" y1="32" x2="262" y2="32"/>
        <line fill="none" id="Gstring" stroke="#000000" stroke-width="0.1" stroke-linecap="round" stroke-linejoin="round" x1="6" y1="25.5" x2="262" y2="25.5"/>
        <line fill="none" id="Bstring" stroke="#000000" stroke-width="0.1" stroke-linecap="round" stroke-linejoin="round" x1="6" y1="19" x2="262" y2="19"/>
        <line fill="none" id="highE" stroke="#000000" stroke-width="0.1" stroke-linecap="round" stroke-linejoin="round" x1="6" y1="12.5" x2="262" y2="12.5"/>
</g>
<rect x="258" y="12" display="inline" width="0.829" height="32.73"/>
<rect x="260" y="12" display="inline" width="2.618" height="32.73"/>
<rect x="78" y="12" display="inline" width="0.829" height="32.73"/>
<rect x="6" y="12" display="inline" width="1" height="32.73"/>
<rect x="204" y="12" display="inline" width="0.829" height="32.73"/>
<rect x="142" y="12" display="inline" width="0.829" height="32.73"/>
<text x="13" y="21" style="text-anchor: middle" display="inline" font-family="'MyriadPro-Bold'" font-size="8.3685">T</text>
<text x="13" y="31" style="text-anchor: middle" display="inline" font-family="'MyriadPro-Bold'" font-size="8.3685">A</text>
<text x="13" y="41" style="text-anchor: middle" display="inline" font-family="'MyriadPro-Bold'" font-size="8.3685">B</text>
<g id="fretinformation">    

</g><!--Fret Information -->
</g><!--Full Tab -->
</svg>

The code below is the g element with the paired text elements I am using which when inserted into the document causes the scrollbar to extend to about twice the width of the drawing size. I have a number of these with different x values. They are in the #fretinformation g element which is empty in the code above.

<g display="inline">
    <text x="248" y="35" style="text-anchor: middle" fill="#324DCE" font-family="'MyriadPro-Bold'" font-size="8.3685">2</text>
    <text x="248" y="41.5" style="text-anchor: middle" fill="#324DCE" font-family="'MyriadPro-Bold'" font-size="8.3685">3</text>
</g>

I had thought the g element had no width value and the text element width would collapse to only the width of the text it contained. What are the default widths/margin/padding of the g and text elements? And how can I change this behavior so there is no horizontal scrollbar? Thanks--Christopher

EDIT What appears to be happening is the text element is getting a width of 90% of the window size and as the text element is transformed along the x axis, it increases the overall width of the SVG file to be almost twice what it should be. As I remove text elements from right to left, the amount of whitespace to the right of the SVG file decreases.

Answer 1

SVG does not use a box layout model like HTML/CSS.

Putting display="inline" on an SVG element is basically meaningless. SVG elements are placed and drawn where you explicitly tell them.

The thing that determines the width and height of an SVG document is the width and height attributes (and sometimes the viewBox) of the root <svg> element.

However there are some differences (ie. bugs) in the way browsers lay out SVG elements. The fact that you are getting a scrollbar is an IE bug. You can use GCyrillus' overflow hidden trick to fix that.