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

Question

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

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

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

下面的代码是没有 g 元素的 SVG 包含成对的 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 元素没有宽度值，文本元素的宽度会折叠到它所包含的文本的宽度。 g 和 text 元素的默认 widths/margin/padding 是什么？我怎样才能改变这种行为，所以没有水平滚动条？ 谢谢--克里斯托弗

编辑 似乎正在发生的事情是text 元素的宽度为窗口大小的 90%，并且随着文本元素沿 x 轴进行转换，它将 SVG 文件的整体宽度几乎增加了两倍。是。当我从右到左删除文本元素时，SVG 文件右侧的空白量会减少。

Answer 1

SVG 不使用 box layout model 像 HTML/CSS。

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

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

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

Answer 2

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

我注意到 chrome 中的一个错误和 IE11 中的另一个错误。哪一个让你烦恼？

在你的情况下，你可以使用 height:1%;(chrome) 和 overflow:hidden(IE) 修复它：@987654321 @

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

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