Html SVG的默认宽度/边距/填充<；g>；及<；文本>；元素？

我正在处理以下SVG文件。

如果您从FIDLE文件中注意到，水平滚动条将扩展到SVG图形宽度的两倍左右。SVG边缘之外只有空白。如果我删除

和

元素，则水平滚动条将消失，并且是屏幕宽度的大小

您可以在第二个jsfiddle上看到这一点

下面的代码是SVG，没有包含成对的

text

元素的

g

元素

<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>

我原以为

g

元素没有宽度值，文本元素的宽度将塌陷为它所包含文本的宽度。

g

和

text

元素的默认

宽度/边距/填充

是什么？我怎样才能改变这种行为，这样就没有水平滚动条了？ 谢谢，克里斯托弗

编辑

---

出现的情况是

text

元素的宽度为窗口大小的90%，随着文本元素沿x轴变换，它将SVG文件的总宽度增加了近两倍。当我从右向左删除文本元素时，SVG文件右侧的空白量会减少。

它呈现为一个内联框，没有任何额外的填充或边距

我注意到chrome中有一个bug，IE11中有一个bug。哪一个让你烦恼

这是一个可以用以下方法修复的bug：

height:1%（chrome）和溢出：在您的情况下隐藏：

svg {
    display:block;
    border:solid;
    width:90%;
    height:1%; /* fix webkit */
    overflow:hidden;/* fix IE */
}

重新编辑了IE11中的JSFIDLE:以再次检查您的评论
SVG
不使用
框布局模型
如
HTML
/
CSS

将
display=“inline”
放在
SVG
元素上基本上没有意义。SVG元素放置和绘制在您明确告知它们的位置

决定SVG文档宽度和高度的是根
元素的
宽度和
高度属性（有时是
视图框
）

然而，在浏览器布局SVG元素的方式上存在一些差异（即bug）。事实上，你得到一个滚动条是一个IE错误。您可以使用GCyrillus的溢出隐藏技巧来修复此问题。
我实际上使用的是internet explorer 11。查看您的链接，我仍然看到一个水平滚动条，大约是svg图形宽度的两倍。添加“高度”属性并没有解决该问题。这个问题与g元素或text元素的宽度有关。啊，我明白了，另一个与Chrome不同的bug，解决它的方法是在svg中添加：overflow:hidden。overflow:hidden确实有效，但是，它没有回答svg文本元素的默认宽度是多少的问题，也没有回答如何设置或更改该宽度。@ChristopherGaston请澄清您的问题：屏幕截图、wich浏览器、使用了什么代码。为我生产无滚动inIE11、Chrome、Firefox、Opera最新版本。你真的检查过了吗？我试过了
溢出：隐藏
，它确实删除了水平滚动条，但是它引入了其他问题。我的图像会动态调整大小，并在svg元素的两个主要块之间交换。使用“溢出：隐藏”选项，整个图像在调整大小时不再是动态的，图像的其他部分现在扩展到视图平面之外，不再可见。是否有其他选项可用于折叠文本元素的宽度，使其仅为其包含的文本的大小？viewbox属性隐藏了溢出SVG的内容，但它仍然存在，并且在内联文档时处理方式与浏览器不同。它被假设表现为内联框类似的对象或img。
svg {
    display:block;
    border:solid;
    width:90%;
    height:1%; /* fix webkit */
    overflow:hidden;/* fix IE */
}