SVG <g>和<text>元素的默认宽度/边距/填充是什么？</text> </g>

Question

我正在处理以下SVG文件。 http://jsfiddle.net/slayerofgiants/9y3qc/8/

如果您从小提琴文件中注意到，水平滚动条延伸到SVG绘图宽度的大约两倍。除了SVG的边缘之外，只有白色空间。如果我删除<g>和<text>元素，则水平滚动条会消失，并且是屏幕宽度的大小。

你可以在这第二个jsfiddle看到这个 http://jsfiddle.net/slayerofgiants/m5zPv/

以下代码是SVG，其中没有g元素包含已配对的text元素。

<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元素，其中包含我正在使用的成对text元素，当插入到文档中时，滚动条会延伸到绘图大小宽度的两倍左右。我有许多具有不同x值的这些。它们位于#fretinformation g元素中，在上面的代码中为空。

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

我原以为g元素没有宽度值，文本元素宽度只会折叠到它包含的文本的宽度。 widths/margin/padding和g元素的默认text是什么？我怎么能改变这种行为，所以没有水平滚动条？ 谢谢 - 克里斯托弗

修改 似乎正在发生的是text元素的宽度为窗口大小的90％，并且随着文本元素沿x轴变换，它将SVG文件的整体宽度增加到几乎两倍它应该是。当我从右到左删除文本元素时，SVG文件右侧的空白量会减少。

Answer 1

SVG不使用box layout model / HTML之类的CSS。

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

确定SVG文档宽度和高度的因素是根width元素的height和viewBox属性（有时是<svg>）。

然而，浏览器布局SVG元素的方式存在一些差异（即错误）。您获得滚动条的事实是IE错误。你可以使用GCyrillus＆＃39;溢出隐藏的技巧来解决这个问题。

Answer 2

渲染为内联框，没有任何额外的填充或边距。

我注意到Chrome中的一个错误和IE11中的另一个错误。谁会困扰你？

在某种程度上，您可以修复一个错误：height:1%; （chrome）和overflow:hidden （IE）在您的情况下：<强> DEMO

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

jsfiddle从IE11重新编辑：http://jsfiddle.net/9y3qc/13/再次检查你的评论